<template>
  <div class="fitness-container">
    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 步骤导航 -->
      <el-steps :active="activeStep" finish-status="success" class="steps-nav">
        <el-step title="设定目标" description="选择健身目标类型"></el-step>
        <el-step title="具体指标" description="设定目标具体指标"></el-step>
        <el-step title="计划周期" description="设定计划持续时间"></el-step>
        <el-step title="计划详情" description="查看生成的计划"></el-step>
      </el-steps>

      <!-- 步骤内容区 -->
      <div class="step-content">
        <!-- 第一步：选择健身目标类型 -->
        <div class="step-panel" v-show="activeStep === 0">
          <h2>选择您的健身目标</h2>
          <div class="goal-cards">
            <el-card 
              v-for="goal in goalTypes" 
              :key="goal.value"
              :class="['goal-card', {'selected': selectedGoal === goal.value}]"
              @click.native="selectGoal(goal.value)">
              <div class="goal-icon">
                <i :class="goal.icon"></i>
              </div>
              <h3>{{ goal.label }}</h3>
              <p>{{ goal.description }}</p>
            </el-card>
          </div>
          <div class="action-buttons">
            <el-button type="text" @click="gotoVideos">直接查看训练视频</el-button>
            <el-button type="primary" @click="nextStep" :disabled="!selectedGoal">下一步</el-button>
          </div>
        </div>

        <!-- 第二步：设定具体目标指标 -->
        <div class="step-panel" v-show="activeStep === 1">
          <h2>设定目标指标</h2>
          <!-- 显示当前选择的目标，方便调试 -->
          <div class="debug-info" v-if="selectedGoal" style="margin-bottom: 10px !important; padding: 8px !important; background-color: #f0f9eb; border-radius: 4px;">
            <p style="margin: 0; color: #67C23A;">当前选择的目标: {{ goalTypesMap[selectedGoal] }}</p>
          </div>
          
          <el-form :model="goalForm" :rules="goalRules" ref="goalForm" label-width="170px">
            <!-- 根据选择的目标类型显示不同的表单内容 -->
            <div v-if="!selectedGoal">
              <p class="notice-text">请先在第一步选择健身目标类型</p>
            </div>
            
            <!-- 减肥目标表单 -->
            <div v-else-if="selectedGoal === 'weight-loss'">
              <el-form-item label="目标体重(kg)" prop="targetWeight">
                <el-input-number v-model="goalForm.targetWeight" :min="30" :max="200" style="width: 100%"></el-input-number>
              </el-form-item>
              <el-form-item label="计划周期内总减重(kg)" prop="plannedWeightLoss">
                <el-input-number v-model="goalForm.plannedWeightLoss" :min="1" :max="30" style="width: 100%"></el-input-number>
              </el-form-item>
              <el-form-item label="每周目标减重(kg)" prop="weeklyWeightLoss">
                <el-input-number v-model="goalForm.weeklyWeightLoss" :min="0.5" :max="2" :step="0.1" :precision="1" style="width: 100%"></el-input-number>
              </el-form-item>
              <el-form-item label="重点关注区域" prop="focusAreas">
                <el-checkbox-group v-model="goalForm.focusAreas">
                  <el-checkbox label="腹部">腹部</el-checkbox>
                  <el-checkbox label="大腿">大腿</el-checkbox>
                  <el-checkbox label="臀部">臀部</el-checkbox>
                  <el-checkbox label="手臂">手臂</el-checkbox>
                  <el-checkbox label="全身">全身</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            
            <!-- 增肌目标表单 -->
            <div v-else-if="selectedGoal === 'muscle-gain'">
              <el-form-item label="目标增肌量(kg)" prop="muscleGain">
                <el-input-number v-model="goalForm.muscleGain" :min="1" :max="20" style="width: 100%"></el-input-number>
              </el-form-item>
              <el-form-item label="每周目标增肌(kg)" prop="weeklyMuscleGain">
                <el-input-number v-model="goalForm.weeklyMuscleGain" :min="0.2" :max="1" :step="0.1" :precision="1" style="width: 100%"></el-input-number>
              </el-form-item>
              <el-form-item label="重点锻炼部位" prop="muscleGroups">
                <el-checkbox-group v-model="goalForm.muscleGroups">
                  <el-checkbox label="胸部">胸部</el-checkbox>
                  <el-checkbox label="背部">背部</el-checkbox>
                  <el-checkbox label="肩部">肩部</el-checkbox>
                  <el-checkbox label="手臂">手臂</el-checkbox>
                  <el-checkbox label="腿部">腿部</el-checkbox>
                  <el-checkbox label="核心">核心</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="力量提升目标" prop="strengthGoal">
                <el-select v-model="goalForm.strengthGoal" placeholder="请选择力量提升目标" style="width: 100%">
                  <el-option label="提高最大肌力 (1-5RM)" value="最大肌力"></el-option>
                  <el-option label="提高肌肉体积 (8-12RM)" value="肌肉体积"></el-option>
                  <el-option label="提高肌肉耐力 (15+RM)" value="肌肉耐力"></el-option>
                  <el-option label="均衡发展" value="均衡发展"></el-option>
                </el-select>
              </el-form-item>
            </div>
            
            <!-- 健美目标表单 -->
            <div v-else-if="selectedGoal === 'bodybuilding'">
              <el-form-item label="目标体脂率(%)" prop="bodyFat">
                <el-input-number v-model="goalForm.bodyFat" :min="5" :max="30" :precision="1" style="width: 100%"></el-input-number>
                <div class="form-tip">男性健美体脂率建议8-12%，女性建议18-22%</div>
              </el-form-item>
              <el-form-item label="重点塑造部位" prop="sculptingAreas">
                <el-checkbox-group v-model="goalForm.sculptingAreas">
                  <el-checkbox label="胸部">胸部</el-checkbox>
                  <el-checkbox label="背阔肌">背阔肌</el-checkbox>
                  <el-checkbox label="肩部">肩部</el-checkbox>
                  <el-checkbox label="二头肌">二头肌</el-checkbox>
                  <el-checkbox label="三头肌">三头肌</el-checkbox>
                  <el-checkbox label="大腿">大腿</el-checkbox>
                  <el-checkbox label="小腿">小腿</el-checkbox>
                  <el-checkbox label="腹肌">腹肌</el-checkbox>
                </el-checkbox-group>
                <div class="form-tip">请选择1-3个重点部位，以便生成更精准的训练计划</div>
              </el-form-item>
              <el-form-item label="训练风格偏好" prop="trainingStyle">
                <el-select v-model="goalForm.trainingStyle" placeholder="请选择训练风格" style="width: 100%">
                  <el-option label="传统健美训练" value="传统健美训练"></el-option>
                  <el-option label="高强度训练(HIT)" value="高强度训练"></el-option>
                  <el-option label="德式容量训练" value="德式容量训练"></el-option>
                  <el-option label="巨人组训练" value="巨人组训练"></el-option>
                  <el-option label="超级组训练" value="超级组训练"></el-option>
                </el-select>
                <div class="form-tip">不同训练风格会影响训练强度和恢复策略</div>
              </el-form-item>
              <el-form-item label="比赛计划" prop="competitionPlan">
                <el-radio-group v-model="goalForm.competitionPlan">
                  <el-radio :label="true">有比赛计划</el-radio>
                  <el-radio :label="false">无比赛计划</el-radio>
                </el-radio-group>
                <div class="form-tip" v-if="goalForm.competitionPlan">比赛计划将包含更严格的饮食控制和训练周期</div>
              </el-form-item>
            </div>
            
            <!-- 耐力目标表单 -->
            <div v-else-if="selectedGoal === 'endurance'">
              <el-form-item label="耐力目标" prop="enduranceTarget">
                <el-select v-model="goalForm.enduranceTarget" placeholder="请选择耐力目标" style="width: 100%">
                  <el-option label="完成5公里跑步" value="完成5公里跑步"></el-option>
                  <el-option label="完成10公里跑步" value="完成10公里跑步"></el-option>
                  <el-option label="完成半程马拉松" value="完成半程马拉松"></el-option>
                  <el-option label="完成全程马拉松" value="完成全程马拉松"></el-option>
                  <el-option label="提高游泳距离至1000米" value="提高游泳距离至1000米"></el-option>
                  <el-option label="提高游泳距离至2000米" value="提高游泳距离至2000米"></el-option>
                  <el-option label="完成骑行100公里" value="完成骑行100公里"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="当前完成距离/时间" prop="currentEndurance">
                <el-input v-model="goalForm.currentEndurance" placeholder="例如：可以跑3公里/游泳500米" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="目标配速" prop="targetPace">
                <el-input v-model="goalForm.targetPace" placeholder="例如：5分钟/公里，2小时内完成半马" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="训练偏好" prop="endurancePreference">
                <el-checkbox-group v-model="goalForm.endurancePreference">
                  <el-checkbox label="长距离慢跑">长距离慢跑</el-checkbox>
                  <el-checkbox label="间歇训练">间歇训练</el-checkbox>
                  <el-checkbox label="节奏跑">节奏跑</el-checkbox>
                  <el-checkbox label="坡度训练">坡度训练</el-checkbox>
                  <el-checkbox label="力量结合">力量结合</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            
            <!-- 健康维持目标表单 -->
            <div v-else-if="selectedGoal === 'general-fitness'">
              <el-form-item label="健康目标" prop="healthGoal">
                <el-select v-model="goalForm.healthGoal" placeholder="请选择健康目标" style="width: 100%">
                  <el-option label="保持健康体重" value="保持健康体重"></el-option>
                  <el-option label="改善心肺功能" value="改善心肺功能"></el-option>
                  <el-option label="提高日常活力" value="提高日常活力"></el-option>
                  <el-option label="改善姿势" value="改善姿势"></el-option>
                  <el-option label="增强免疫力" value="增强免疫力"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日常活动水平" prop="activityLevel">
                <el-select v-model="goalForm.activityLevel" placeholder="请选择您的日常活动水平" style="width: 100%">
                  <el-option label="久坐不动 (几乎不运动)" value="久坐不动"></el-option>
                  <el-option label="轻度活动 (每周运动1-2次)" value="轻度活动"></el-option>
                  <el-option label="中度活动 (每周运动3-4次)" value="中度活动"></el-option>
                  <el-option label="高度活动 (每周运动5-7次)" value="高度活动"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="健康指标改善" prop="healthMarkers">
                <el-checkbox-group v-model="goalForm.healthMarkers">
                  <el-checkbox label="血压">血压</el-checkbox>
                  <el-checkbox label="血糖">血糖</el-checkbox>
                  <el-checkbox label="胆固醇">胆固醇</el-checkbox>
                  <el-checkbox label="安静心率">安静心率</el-checkbox>
                  <el-checkbox label="睡眠质量">睡眠质量</el-checkbox>
                  <el-checkbox label="精神状态">精神状态</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="锻炼偏好" prop="exercisePreference">
                <el-select v-model="goalForm.exercisePreference" placeholder="请选择您喜欢的锻炼方式" style="width: 100%">
                  <el-option label="有氧运动 (跑步、游泳等)" value="有氧运动"></el-option>
                  <el-option label="力量训练 (举重、器械等)" value="力量训练"></el-option>
                  <el-option label="灵活性训练 (瑜伽、拉伸等)" value="灵活性训练"></el-option>
                  <el-option label="团体课程 (健身操、舞蹈等)" value="团体课程"></el-option>
                  <el-option label="综合训练" value="综合训练"></el-option>
                </el-select>
              </el-form-item>
            </div>
            
            <div class="action-buttons">
              <el-button @click="prevStep">上一步</el-button>
              <el-button type="primary" @click="validateAndNext('goalForm')">下一步</el-button>
            </div>
          </el-form>
        </div>

        <!-- 第三步：设定计划持续时间 -->
        <div class="step-panel" v-show="activeStep === 2">
          <h2>设定计划周期</h2>
          <el-form :model="durationForm" :rules="durationRules" ref="durationForm" label-width="170px">
            <el-form-item label="计划开始日期" prop="startDate">
              <el-date-picker
                v-model="durationForm.startDate"
                type="date"
                placeholder="选择开始日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
            
            <el-form-item label="计划持续时间" prop="duration">
              <el-select v-model="durationForm.duration" placeholder="请选择持续时间" style="width: 100%">
                <el-option label="4周 (1个月)" value="4"></el-option>
                <el-option label="8周 (2个月)" value="8"></el-option>
                <el-option label="12周 (3个月)" value="12"></el-option>
                <el-option label="16周 (4个月)" value="16"></el-option>
                <el-option label="24周 (6个月)" value="24"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="每周训练天数" prop="daysPerWeek">
              <el-select v-model="durationForm.daysPerWeek" placeholder="请选择每周训练频率" style="width: 100%">
                <el-option label="2天/周 (初学者)" value="2"></el-option>
                <el-option label="3天/周 (推荐)" value="3"></el-option>
                <el-option label="4天/周 (进阶)" value="4"></el-option>
                <el-option label="5天/周 (高级)" value="5"></el-option>
                <el-option label="6天/周 (专业)" value="6"></el-option>
              </el-select>
            </el-form-item>
            
            <div class="action-buttons">
              <el-button @click="prevStep">上一步</el-button>
              <el-button type="primary" @click="validateAndNext('durationForm')">生成计划</el-button>
            </div>
          </el-form>
        </div>

        <!-- 第四步：查看生成的健身计划 -->
        <div class="step-panel plan-result" v-show="activeStep === 3">
          <h2>您的健身计划</h2>
          
          <!-- 计划概览 -->
          <el-card class="plan-overview">
            <div slot="header">
              <span>计划概览</span>
            </div>
            <div class="overview-content">
              <div class="goal-summary">
                <h3>目标: {{ goalTypesMap[selectedGoal] }}</h3>
                
                <!-- 减肥目标概览 -->
                <div v-if="selectedGoal === 'weight-loss'">
                  <p>目标体重: {{ goalForm.targetWeight }}kg</p>
                  <p>计划总减重: {{ goalForm.plannedWeightLoss }}kg</p>
                  <p>每周目标减重: {{ goalForm.weeklyWeightLoss }}kg</p>
                  <p>重点关注区域: {{ goalForm.focusAreas.join(', ') }}</p>
                </div>
                
                <!-- 增肌目标概览 -->
                <div v-else-if="selectedGoal === 'muscle-gain'">
                  <p>目标增肌: {{ goalForm.muscleGain }}kg</p>
                  <p>每周目标增肌: {{ goalForm.weeklyMuscleGain }}kg</p>
                  <p>重点锻炼部位: {{ goalForm.muscleGroups.join(', ') }}</p>
                  <p>力量提升目标: {{ goalForm.strengthGoal }}</p>
                </div>
                
                <!-- 健美目标概览 -->
                <div v-else-if="selectedGoal === 'bodybuilding'">
                  <p>目标体脂率: {{ goalForm.bodyFat }}%</p>
                  <p>重点塑造部位: {{ goalForm.sculptingAreas.join(', ') }}</p>
                  <p>训练风格: {{ goalForm.trainingStyle }}</p>
                  <p>比赛计划: {{ goalForm.competitionPlan ? '有' : '无' }}</p>
                  
                  <!-- 健美计划专业信息 -->
                  <div class="bodybuilding-pro-info" v-if="selectedGoal === 'bodybuilding'">
                    <h4>健美训练专业建议</h4>
                    <ul>
                      <li v-if="goalForm.bodyFat < 10">当前目标体脂率较低，需特别关注蛋白质摄入和恢复策略</li>
                      <li v-else-if="goalForm.bodyFat < 15">当前目标体脂率适中，可平衡肌肉增长和脂肪减少</li>
                      <li v-else>当前目标体脂率较高，建议先侧重减脂阶段</li>
                      
                      <li v-if="goalForm.sculptingAreas.includes('胸部')">胸部训练建议：注重上胸、中胸和下胸的平衡发展</li>
                      <li v-if="goalForm.sculptingAreas.includes('背阔肌')">背部训练建议：结合宽距和窄距动作，全面发展背部宽度和厚度</li>
                      <li v-if="goalForm.sculptingAreas.includes('肩部')">肩部训练建议：平衡前、中、后三角肌发展，注重肩部线条塑造</li>
                      
                      <li v-if="goalForm.trainingStyle === '传统健美训练'">传统健美训练特点：中等重量、高容量、适中休息时间</li>
                      <li v-if="goalForm.trainingStyle === '高强度训练(HIT)'">高强度训练特点：大重量、低容量、充分休息时间</li>
                      <li v-if="goalForm.trainingStyle === '德式容量训练'">德式容量训练特点：中等重量、极高容量、短休息时间</li>
                      <li v-if="goalForm.trainingStyle === '巨人组训练'">巨人组训练特点：连续4-6个动作不休息，强调肌肉充血</li>
                      <li v-if="goalForm.trainingStyle === '超级组训练'">超级组训练特点：两个动作交替进行，提高训练效率</li>
                      
                      <li v-if="goalForm.competitionPlan">比赛准备建议：分为增肌期、过渡期和赛前期三个阶段，赛前12-16周开始减脂</li>
                    </ul>
                  </div>
                </div>
                
                <!-- 耐力目标概览 -->
                <div v-else-if="selectedGoal === 'endurance'">
                  <p>耐力目标: {{ goalForm.enduranceTarget }}</p>
                  <p>当前状态: {{ goalForm.currentEndurance }}</p>
                  <p>目标配速: {{ goalForm.targetPace }}</p>
                  <p>训练偏好: {{ goalForm.endurancePreference.join(', ') }}</p>
                </div>
                
                <!-- 健康维持目标概览 -->
                <div v-else-if="selectedGoal === 'general-fitness'">
                  <p>健康目标: {{ goalForm.healthGoal }}</p>
                  <p>日常活动水平: {{ goalForm.activityLevel }}</p>
                  <p>关注健康指标: {{ goalForm.healthMarkers.join(', ') }}</p>
                  <p>锻炼偏好: {{ goalForm.exercisePreference }}</p>
                </div>
                
                <p>开始日期: {{ formatDate(durationForm.startDate) }}</p>
                <p>持续时间: {{ durationForm.duration }}周</p>
                <p>训练频率: 每周{{ durationForm.daysPerWeek }}天</p>
              </div>
            </div>
          </el-card>
          
          <!-- 对于需要显示专业建议的计划类型，只显示专家建议卡片，隐藏其他前端生成的内容 -->
          <div v-if="selectedGoal === 'bodybuilding' || selectedGoal === 'weight-loss' || 
                     selectedGoal === 'muscle-gain' || selectedGoal === 'endurance' || 
                     selectedGoal === 'general-fitness'">
            <!-- 专家建议卡片 -->
            <el-card class="expert-advice-card" v-if="otherAdvice.expertAdvice">
              <div slot="header">
                <span>专业{{ getPlanTypeName() }}计划</span>
              </div>
              <div class="expert-advice-content">
                <div class="advice-item expert-advice">
                  <i class="el-icon-s-custom"></i>
                  <div v-html="formatExpertAdvice(otherAdvice.expertAdvice)"></div>
                </div>
              </div>
            </el-card>
            
            <!-- 如果没有获取到专家建议，显示提示信息 -->
            <el-card v-else class="empty-plan-card">
              <div class="empty-plan-content">
                <i class="el-icon-loading loading-icon" v-if="activeStep === 3"></i>
                <i class="el-icon-warning-outline" v-else></i>
                <h3>{{ activeStep === 3 ? '正在生成' + getPlanTypeName() + '计划...' : '暂无' + getPlanTypeName() + '计划数据' }}</h3>
                <p v-if="activeStep === 3">正在为您生成专业{{ getPlanTypeName() }}计划，这可能需要一些时间，请耐心等待...</p>
                <p v-else>请点击"重新制定计划"按钮重试</p>
              </div>
            </el-card>
          </div>
          
          <!-- 对于其他类型的计划，显示前端生成的内容 -->
          <div v-else>
            <!-- 阶段目标 -->
            <el-card class="milestone-targets">
              <div slot="header">
                <span>阶段目标</span>
              </div>
              <el-timeline>
                <el-timeline-item
                  v-for="(milestone, index) in milestones"
                  :key="index"
                  :type="milestone.type"
                  :color="milestone.color"
                  :timestamp="milestone.time">
                  <h4>{{ milestone.title }}</h4>
                  <p>{{ milestone.content }}</p>
                </el-timeline-item>
              </el-timeline>
            </el-card>
            
            <!-- 周计划标签页 -->
            <el-card class="weekly-plan">
              <div slot="header">
                <span>每周训练计划</span>
              </div>
              <el-tabs v-model="activeWeek" type="card">
                <el-tab-pane
                  v-for="week in generatedPlan.weeklyPlans"
                  :key="week.weekNumber"
                  :label="`第${week.weekNumber}周`"
                  :name="week.weekNumber.toString()">
                  
                  <div class="weekly-schedule">
                    <div 
                      v-for="(day, index) in week.days" 
                      :key="index"
                      class="day-card">
                      <h4>{{ getDayName(index) }}</h4>
                      <template v-if="day.isRestDay">
                        <div class="rest-day">
                          <i class="el-icon-moon"></i>
                          <p>休息日</p>
                        </div>
                      </template>
                      <template v-else>
                        <div class="workout-info">
                          <h5>{{ day.focus }}</h5>
                          <div class="exercise-list">
                            <div v-for="(exercise, i) in day.exercises" :key="i" class="exercise-item">
                              <span class="exercise-name">{{ exercise.name }}</span>
                              <span class="exercise-detail">{{ exercise.sets }}组 x {{ exercise.reps }}</span>
                              <el-button type="text" size="mini" @click="showVideo(exercise.videoId)">
                                <i class="el-icon-video-play"></i> 查看教程
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-card>
            
            <!-- 饮食建议 -->
            <el-card class="nutrition-advice">
              <div slot="header">
                <span>饮食建议</span>
              </div>
              <div class="nutrition-content">
                <div class="macro-nutrients">
                  <h3>每日营养摄入目标</h3>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <div class="nutrient-box">
                        <h4>蛋白质</h4>
                        <p class="nutrient-value">{{ nutritionPlan.protein }}g</p>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="nutrient-box">
                        <h4>碳水化合物</h4>
                        <p class="nutrient-value">{{ nutritionPlan.carbs }}g</p>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="nutrient-box">
                        <h4>脂肪</h4>
                        <p class="nutrient-value">{{ nutritionPlan.fat }}g</p>
                      </div>
                    </el-col>
                  </el-row>
                  <p class="calorie-total">总热量: {{ nutritionPlan.calories }} 卡路里/天</p>
                </div>
                
                <div class="meal-suggestions">
                  <h3>餐食建议</h3>
                  <el-collapse v-model="activeMeal">
                    <el-collapse-item title="早餐" name="breakfast">
                      <p>{{ nutritionPlan.meals.breakfast }}</p>
                    </el-collapse-item>
                    <el-collapse-item title="午餐" name="lunch">
                      <p>{{ nutritionPlan.meals.lunch }}</p>
                    </el-collapse-item>
                    <el-collapse-item title="晚餐" name="dinner">
                      <p>{{ nutritionPlan.meals.dinner }}</p>
                    </el-collapse-item>
                    <el-collapse-item title="加餐/训练前后" name="snacks">
                      <p>{{ nutritionPlan.meals.snacks }}</p>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </el-card>
            
            <!-- 其他建议 -->
            <el-card class="additional-advice">
              <div slot="header">
                <span>其他健康建议</span>
              </div>
              <el-collapse v-model="activeAdvice">
                <el-collapse-item title="睡眠建议" name="sleep">
                  <div class="advice-item">
                    <i class="el-icon-moon"></i>
                    <p>{{ otherAdvice.sleep }}</p>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="恢复策略" name="recovery">
                  <div class="advice-item">
                    <i class="el-icon-refresh"></i>
                    <p>{{ otherAdvice.recovery }}</p>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="进度追踪" name="tracking">
                  <div class="advice-item">
                    <i class="el-icon-data-line"></i>
                    <p>{{ otherAdvice.tracking }}</p>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-card>
          </div>
          
          <div class="action-buttons">
            <el-button @click="resetPlan">重新制定计划</el-button>
            <el-button type="primary" @click="exportPlan">导出计划</el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 训练视频对话框 -->
    <el-dialog
      title="训练教学视频"
      :visible.sync="videoDialogVisible"
      width="70%"
      center>
      <div class="video-container" v-if="videoDialogVisible">
        <iframe 
          :src="currentVideoUrl" 
          frameborder="0" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen>
        </iframe>
      </div>
    </el-dialog>
    
    <!-- 训练视频库 -->
    <div class="video-library" v-show="showVideoLibrary">
      <h2>训练视频库</h2>
      
      <el-input
        placeholder="搜索训练视频"
        v-model="videoSearchKeyword"
        class="video-search">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      
      <el-tabs v-model="activeVideoCategory">
        <el-tab-pane 
          v-for="category in videoCategories" 
          :key="category.value" 
          :label="category.label" 
          :name="category.value">
          
          <div class="video-grid">
            <el-card 
            v-for="video in filteredVideos(category.value)" 
            :key="video.id || (video.bvid + '-' + video.p)"
            class="video-card"
            shadow="hover"
            @click.native="video.bvid ? showBilibiliVideo(video) : showVideo(video.id)">
              <div class="video-thumbnail">
                <img :src="video.thumbnail" :alt="video.title">
                <div class="play-icon">
                  <i class="el-icon-video-play"></i>
                </div>
              </div>
              <div class="video-info">
                <h4>{{ video.title }}</h4>
                <p class="video-duration">{{ video.duration }}</p>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div class="action-buttons">
        <el-button type="primary" @click="backToPlanner">返回计划制定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
import axios from 'axios';

export default {
  name: 'FitnessView',
  data() {
    return {
      activeStep: 0,
      showVideoLibrary: false,
      bilibiliVideos: [],
      selectedGoal: '',
      goalTypes: [
        { 
          label: '减肥', 
          value: 'weight-loss', 
          icon: 'el-icon-arrow-down', 
          description: '减少体重，改善身体成分' 
        },
        { 
          label: '增肌', 
          value: 'muscle-gain', 
          icon: 'el-icon-top', 
          description: '增加肌肉量，提高力量' 
        },
        { 
          label: '健美', 
          value: 'bodybuilding', 
          icon: 'el-icon-s-operation', 
          description: '塑造肌肉线条，降低体脂率' 
        },
        { 
          label: '耐力', 
          value: 'endurance', 
          icon: 'el-icon-time', 
          description: '提高心肺功能和持久力' 
        },
        { 
          label: '健康维持', 
          value: 'general-fitness', 
          icon: 'el-icon-star-on', 
          description: '保持健康生活方式' 
        }
      ],
      goalTypesMap: {
        'weight-loss': '减肥',
        'muscle-gain': '增肌',
        'bodybuilding': '健美',
        'endurance': '耐力',
        'general-fitness': '健康维持'
      },
      goalForm: {
        currentWeight: 70, // 从数据库获取
        height: 170, // 从数据库获取
        age: 30, // 从数据库获取
        gender: 'male', // 从数据库获取
        
        // 减肥
        targetWeight: 65,
        plannedWeightLoss: 5,
        weeklyWeightLoss: 0.5,
        focusAreas: ['腹部', '全身'],
        
        // 增肌
        muscleGain: 5,
        weeklyMuscleGain: 0.3,
        muscleGroups: ['胸部', '手臂', '背部'],
        strengthGoal: '肌肉体积',
        
        // 健美
        bodyFat: 12,
        sculptingAreas: ['胸部', '腹肌', '背阔肌'],
        trainingStyle: '传统健美训练',
        competitionPlan: false,
        
        // 耐力
        enduranceTarget: '完成10公里跑步',
        currentEndurance: '目前可以跑5公里',
        targetPace: '5分30秒/公里',
        endurancePreference: ['长距离慢跑', '间歇训练'],
        
        // 健康维持
        healthGoal: '保持健康体重',
        activityLevel: '轻度活动',
        healthMarkers: ['血压', '睡眠质量'],
        exercisePreference: '综合训练'
      },
      goalRules: {
        // 减肥
        targetWeight: [
          { required: true, message: '请输入目标体重', trigger: 'blur' }
        ],
        plannedWeightLoss: [
          { required: true, message: '请输入计划总减重量', trigger: 'blur' }
        ],
        weeklyWeightLoss: [
          { required: true, message: '请输入每周目标减重', trigger: 'blur' }
        ],
        focusAreas: [
          { type: 'array', min: 1, message: '请至少选择一个关注区域', trigger: 'change' }
        ],
        
        // 增肌
        muscleGain: [
          { required: true, message: '请输入目标增肌量', trigger: 'blur' }
        ],
        weeklyMuscleGain: [
          { required: true, message: '请输入每周目标增肌量', trigger: 'blur' }
        ],
        muscleGroups: [
          { type: 'array', min: 1, message: '请至少选择一个锻炼部位', trigger: 'change' }
        ],
        strengthGoal: [
          { required: true, message: '请选择力量提升目标', trigger: 'change' }
        ],
        
        // 健美
        bodyFat: [
          { required: true, message: '请输入目标体脂率', trigger: 'blur' },
          { type: 'number', min: 5, max: 30, message: '体脂率必须在5%至30%之间', trigger: 'blur' }
        ],
        sculptingAreas: [
          { type: 'array', min: 1, message: '请至少选择一个塑造部位', trigger: 'change' },
          { 
            validator: (rule, value, callback) => {
              if (value.length > 3) {
                callback(new Error('最多选择3个重点部位'));
              } else {
                callback();
              }
            }, 
            trigger: 'change' 
          }
        ],
        trainingStyle: [
          { required: true, message: '请选择训练风格', trigger: 'change' }
        ],
        
        // 耐力
        enduranceTarget: [
          { required: true, message: '请输入耐力目标', trigger: 'blur' }
        ],
        currentEndurance: [
          { required: true, message: '请输入当前完成距离/时间', trigger: 'blur' }
        ],
        targetPace: [
          { required: true, message: '请输入目标配速', trigger: 'blur' }
        ],
        endurancePreference: [
          { type: 'array', min: 1, message: '请至少选择一种训练偏好', trigger: 'change' }
        ],
        
        // 健康维持
        healthGoal: [
          { required: true, message: '请选择健康目标', trigger: 'change' }
        ],
        activityLevel: [
          { required: true, message: '请选择日常活动水平', trigger: 'change' }
        ],
        healthMarkers: [
          { type: 'array', min: 1, message: '请至少选择一个健康指标', trigger: 'change' }
        ],
        exercisePreference: [
          { required: true, message: '请选择锻炼偏好', trigger: 'change' }
        ]
      },
      durationForm: {
        startDate: new Date(),
        duration: '12',
        daysPerWeek: '3'
      },
      durationRules: {
        startDate: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        duration: [
          { required: true, message: '请选择持续时间', trigger: 'change' }
        ],
        daysPerWeek: [
          { required: true, message: '请选择每周训练天数', trigger: 'change' }
        ]
      },
      activeWeek: '1',
      activeMeal: ['breakfast'],
      activeAdvice: ['sleep', 'expertAdvice'], // 默认展开睡眠建议和专家建议
      videoDialogVisible: false,
      currentVideoUrl: '',
      videoSearchKeyword: '',
      activeVideoCategory: 'all',
      
      // 生成的计划数据
      generatedPlan: {
        weeklyPlans: []
      },
      
      milestones: [],
      nutritionPlan: {
        calories: 2000,
        protein: 150,
        carbs: 200,
        fat: 60,
        meals: {
          breakfast: '燕麦片配蓝莓和希腊酸奶，一份蛋白质奶昔。',
          lunch: '烤鸡胸肉配藜麦和烤蔬菜，一份水果。',
          dinner: '烤三文鱼配糙米和炒西兰花，绿叶沙拉。',
          snacks: '训练前：香蕉和少量杏仁。训练后：蛋白质奶昔或希腊酸奶配浆果。'
        }
      },
      otherAdvice: {
        sleep: '每晚保证7-9小时优质睡眠。保持规律的睡眠时间，睡前1小时避免使用电子设备和摄入咖啡因。',
        recovery: '每周安排至少2天完全休息日让肌肉恢复。可考虑瑜伽、泡沫轴按摩、拉伸等积极恢复活动。',
        tracking: '每周记录体重变化、训练表现和身体测量数据。每4周对计划进行审视和调整。',
        expertAdvice: '' // 添加专家建议字段
      },
      
      // 视频库数据
      videoCategories: [
        { label: '全部', value: 'all' },
        { label: '力量训练', value: 'strength' },
        { label: '有氧训练', value: 'cardio' },
        { label: '灵活性', value: 'flexibility' },
        { label: '核心训练', value: 'core' }
      ],
      trainingVideos: [
        {
          id: 'v1',
          title: '标准深蹲技术详解',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1574680178050-55c6a6a96e0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/bEv6CCg2BC8',
          duration: '10:25'
        },
        {
          id: 'v2',
          title: '标准卧推技术详解',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/rxD321l2svE',
          duration: '8:17'
        },
        {
          id: 'v3',
          title: '高效燃脂HIIT训练',
          category: 'cardio',
          thumbnail: 'https://images.unsplash.com/photo-1486218119243-13883505764c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/ml6cT4AZdqI',
          duration: '20:05'
        },
        {
          id: 'v4',
          title: '全身拉伸放松流程',
          category: 'flexibility',
          thumbnail: 'https://images.unsplash.com/photo-1552196563-55cd4e45efb3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/sTxC3J3gQEU',
          duration: '15:30'
        },
        {
          id: 'v5',
          title: '核心训练六分钟',
          category: 'core',
          thumbnail: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/8PwoytUU06g',
          duration: '6:15'
        },
        {
          id: 'v6',
          title: '哑铃肩部训练',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/5yWaNOvgFCM',
          duration: '12:45'
        },
        {
          id: 'v7',
          title: '室内无器械有氧训练',
          category: 'cardio',
          thumbnail: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/jpizoUy4K9s',
          duration: '25:10'
        },
        {
          id: 'v8',
          title: '瑜伽基础姿势教学',
          category: 'flexibility',
          thumbnail: 'https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/v7AYKMP6rOE',
          duration: '18:20'
        },
        {
          id: 'v9',
          title: '上肢HIIT训练：在家锻炼手臂和肩膀',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/81R4b-o06m4',
          duration: '15:45'
        },
        {
          id: 'v10',
          title: '60分钟力量训练与瑜伽结合',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/q0eDt2Eca2c',
          duration: '60:00'
        },
        {
          id: 'v11',
          title: '如何开始街头健身（初学者指南）',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/3laYurZDxO4',
          duration: '12:30'
        },
        {
          id: 'v12',
          title: '30分钟全身HIIT训练（无器械）',
          category: 'cardio',
          thumbnail: 'https://images.unsplash.com/photo-1549060279-7e168fcee0c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/ml6cT4AZdqI',
          duration: '30:00'
        },
        {
          id: 'v13',
          title: '15分钟腹肌核心训练',
          category: 'core',
          thumbnail: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/8AAmaSOSyIA',
          duration: '15:00'
        },
        {
          id: 'v14',
          title: '20分钟舒缓瑜伽（缓解压力）',
          category: 'flexibility',
          thumbnail: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/BiWDsfZ3zbo',
          duration: '20:00'
        },
        {
          id: 'v15',
          title: '10分钟早晨唤醒瑜伽',
          category: 'flexibility',
          thumbnail: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/UEEsdXn8oG8',
          duration: '10:00'
        },
        {
          id: 'v16',
          title: '45分钟全身力量训练（哑铃）',
          category: 'strength',
          thumbnail: 'https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          videoUrl: 'https://www.youtube.com/embed/IeGrTqW5lek',
          duration: '45:00'
        }
      ]
    }
  },
  computed: {
    goalFormComponent() {
      // 根据选择的目标类型返回不同的表单组件
      console.log('计算 goalFormComponent, selectedGoal =', this.selectedGoal);
      
      if (!this.selectedGoal) {
        return 'general-form';
      }
      
      let component = '';
      switch(this.selectedGoal) {
        case 'weight-loss':
          component = 'weight-loss-form';
          break;
        case 'muscle-gain':
          component = 'muscle-gain-form';
          break;
        case 'bodybuilding':
          component = 'bodybuilding-form';
          break;
        case 'endurance':
          component = 'endurance-form';
          break;
        case 'general-fitness':
          component = 'general-fitness-form';
          break;
        default:
          component = 'general-form';
      }
      
      console.log('返回组件:', component);
      return component;
    }
  },
  components: {
        'weight-loss-form': {
      template: `
        <div>
          <el-form-item label="目标体重(kg)" prop="targetWeight">
            <el-input-number v-model="$parent.goalForm.targetWeight" :min="30" :max="200" style="width: 100%"></el-input-number>
          </el-form-item>
          <div class="form-info">
            <p>个人信息将从您的账户中获取</p>
          </div>
        </div>
      `
    },
    'muscle-gain-form': {
      template: `
        <div>
          <el-form-item label="目标增肌量(kg)" prop="muscleGain">
            <el-input-number v-model="$parent.goalForm.muscleGain" :min="1" :max="20" style="width: 100%"></el-input-number>
          </el-form-item>
          <div class="form-info">
            <p>个人信息将从您的账户中获取</p>
          </div>
        </div>
      `
    },
    'bodybuilding-form': {
      template: `
        <div>
          <el-form-item label="目标体脂率(%)" prop="bodyFat">
            <el-input-number v-model="$parent.goalForm.bodyFat" :min="5" :max="30" :precision="1" style="width: 100%"></el-input-number>
          </el-form-item>
          <div class="form-info">
            <p>个人信息将从您的账户中获取</p>
          </div>
        </div>
      `
    },
    'endurance-form': {
      template: `
        <div>
          <el-form-item label="耐力目标" prop="enduranceTarget">
            <el-select v-model="$parent.goalForm.enduranceTarget" placeholder="请选择耐力目标" style="width: 100%">
              <el-option label="完成5公里跑步" value="完成5公里跑步"></el-option>
              <el-option label="完成10公里跑步" value="完成10公里跑步"></el-option>
              <el-option label="完成半程马拉松" value="完成半程马拉松"></el-option>
              <el-option label="完成全程马拉松" value="完成全程马拉松"></el-option>
              <el-option label="提高游泳距离至1000米" value="提高游泳距离至1000米"></el-option>
              <el-option label="提高游泳距离至2000米" value="提高游泳距离至2000米"></el-option>
              <el-option label="完成骑行100公里" value="完成骑行100公里"></el-option>
            </el-select>
          </el-form-item>
          <div class="form-info">
            <p>个人信息将从您的账户中获取</p>
          </div>
        </div>
      `
    },
    'general-fitness-form': {
      template: `
        <div>
          <el-form-item label="健康目标" prop="healthGoal">
            <el-select v-model="$parent.goalForm.healthGoal" placeholder="请选择健康目标" style="width: 100%">
              <el-option label="保持健康体重" value="保持健康体重"></el-option>
              <el-option label="改善心肺功能" value="改善心肺功能"></el-option>
              <el-option label="提高日常活力" value="提高日常活力"></el-option>
              <el-option label="改善姿势" value="改善姿势"></el-option>
              <el-option label="增强免疫力" value="增强免疫力"></el-option>
            </el-select>
          </el-form-item>
          <div class="form-info">
            <p>个人信息将从您的账户中获取</p>
          </div>
        </div>
      `
    },
    'general-form': {
      template: `
        <div>
          <p class="notice-text">请先在第一步选择健身目标类型</p>
          <div class="form-info">
            <p>个人信息将从您的账户中获取</p>
          </div>
        </div>
      `
    }
  },
  methods: {
    selectGoal(goal) {
      console.log('选择目标:', goal);
      this.selectedGoal = goal;
      console.log('选择后 selectedGoal =', this.selectedGoal);
      
      // 强制更新组件
      this.$forceUpdate();
    },
    nextStep() {
      if (this.activeStep === 0 && !this.selectedGoal) {
        this.$message.warning('请先选择一个健身目标类型');
        return;
      }
      this.activeStep++;
    },
    prevStep() {
      this.activeStep--;
    },
    validateAndNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.activeStep === 2) {
            this.generatePlan();
          }
          this.nextStep();
        } else {
          return false;
        }
      });
    },
    gotoVideos() {
      this.showVideoLibrary = true;
    },
    showVideo(videoId) {
      this.videoDialogVisible = true;
      const video = this.trainingVideos.find(v => v.id === videoId);
      if (video) {
        this.currentVideoUrl = video.videoUrl;
      }
    },
    showBilibiliVideo(video) {
      this.videoDialogVisible = true;
      this.currentVideoUrl = `https://player.bilibili.com/player.html?bvid=${video.bvid}&p=${video.p}`;
    },
    filteredBilibiliVideos(category) {
    let filtered = this.bilibiliVideos;
    if (category && category !== 'all') {
      // 注意：这里的 category.value 需要和你 videoCategories 里的 value 保持一致
      filtered = filtered.filter(video => video.category === this.getCategoryLabel(category));
    }
    if (this.videoSearchKeyword) {
      const keyword = this.videoSearchKeyword.toLowerCase();
      filtered = filtered.filter(video => video.title.toLowerCase().includes(keyword));
    }
    return filtered;
  },
  // 辅助方法：将英文value转为中文label
  getCategoryLabel(value) {
    // 你的视频分类tab的 value 和后端的 category 字段要一一对应
    switch (value) {
      case 'strength': return '力量训练';
      case 'cardio': return '有氧训练';
      case 'flexibility': return '灵活性';
      case 'core': return '核心训练';
      default: return value;
    }
  },
    backToPlanner() {
      this.showVideoLibrary = false;
    },
    resetPlan() {
      this.activeStep = 0;
      this.selectedGoal = '';
      // 只重置目标相关的字段，保留从数据库获取的个人信息
      
      // 减肥目标相关
      this.goalForm.targetWeight = 65;
      this.goalForm.plannedWeightLoss = 5;
      this.goalForm.weeklyWeightLoss = 0.5;
      this.goalForm.focusAreas = ['腹部', '全身'];
      
      // 增肌目标相关
      this.goalForm.muscleGain = 5;
      this.goalForm.weeklyMuscleGain = 0.3;
      this.goalForm.muscleGroups = ['胸部', '手臂', '背部'];
      this.goalForm.strengthGoal = '肌肉体积';
      
      // 健美目标相关
      this.goalForm.bodyFat = 12;
      this.goalForm.sculptingAreas = ['胸部', '腹肌', '背阔肌'];
      this.goalForm.trainingStyle = '传统健美训练';
      this.goalForm.competitionPlan = false;
      
      // 耐力目标相关
      this.goalForm.enduranceTarget = '完成10公里跑步';
      this.goalForm.currentEndurance = '目前可以跑5公里';
      this.goalForm.targetPace = '5分30秒/公里';
      this.goalForm.endurancePreference = ['长距离慢跑', '间歇训练'];
      
      // 健康维持目标相关
      this.goalForm.healthGoal = '保持健康体重';
      this.goalForm.activityLevel = '轻度活动';
      this.goalForm.healthMarkers = ['血压', '睡眠质量'];
      this.goalForm.exercisePreference = '综合训练';
      
      this.durationForm = {
        startDate: new Date(),
        duration: '12',
        daysPerWeek: '3'
      };
    },
    exportPlan() {
      try {
        this.$message.info('开始导出PDF...');
        
        // 创建一个遮罩层，显示正在导出
        const loadingMask = document.createElement('div');
        loadingMask.style.position = 'fixed';
        loadingMask.style.top = '0';
        loadingMask.style.left = '0';
        loadingMask.style.width = '100%';
        loadingMask.style.height = '100%';
        loadingMask.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
        loadingMask.style.display = 'flex';
        loadingMask.style.justifyContent = 'center';
        loadingMask.style.alignItems = 'center';
        loadingMask.style.zIndex = '9999';
        loadingMask.innerHTML = '<div style="font-size: 24px; color: #95d13c;">正在导出PDF，请稍候...</div>';
        document.body.appendChild(loadingMask);
        
        // 获取要导出的DOM元素
        const element = document.querySelector('.plan-result');
        
        // 准备PDF文档，使用A4尺寸
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'mm',
          format: 'a4',
          compress: true
        });
        
        // 声明一个完成导出的回调函数
        const finishExport = () => {
          // 移除遮罩
          document.body.removeChild(loadingMask);
          // 成功消息
          this.$message.success('健身计划已成功导出为PDF格式');
        };
        
        // 使用html2canvas将DOM元素转换为canvas
        html2canvas(element, {
          scale: 2, // 提高分辨率
          useCORS: true, // 允许跨域图像
          logging: false,
          allowTaint: true, // 允许渲染跨域图像
          backgroundColor: '#ffffff',
          imageTimeout: 5000, // 图像加载超时时间
          removeContainer: true, // 移除临时创建的容器
          foreignObjectRendering: false, // 禁用foreignObject渲染
          onclone: (document) => {
            // 克隆文档后的处理，可以修改样式以适应PDF
            const clonedElement = document.querySelector('.plan-result');
            if (clonedElement) {
              // 调整克隆元素的样式以适应打印
              const style = document.createElement('style');
              style.innerHTML = `
                .plan-result * {
                  color: #000 !important;
                  background-color: transparent !important;
                }
                .el-card {
                  border: 1px solid #ddd !important;
                  margin-bottom: 15px !important;
                }
                .el-card__header {
                  background-color: #f0f0f0 !important;
                  padding: 10px !important;
                }
                h3, h4, h5 {
                  margin: 5px 0 !important;
                }
              `;
              document.head.appendChild(style);
            }
          }
        }).then(canvas => {
          // 获取canvas的数据
          const imgData = canvas.toDataURL('image/jpeg', 1.0);
          
          // 获取PDF页面尺寸
          const pdfWidth = pdf.internal.pageSize.getWidth();
          const pdfHeight = pdf.internal.pageSize.getHeight();
          
          // 计算内容宽高比，并确定PDF中的尺寸
          const canvasWidth = canvas.width;
          const canvasHeight = canvas.height;
          const ratio = canvasWidth / canvasHeight;
          
          // 设置页面边距
          const margin = 10; // 10mm边距
          let imgWidth = pdfWidth - (margin * 2);
          let imgHeight = imgWidth / ratio;
          
          // 内容超过一页时的处理
          if (imgHeight > pdfHeight - (margin * 2)) {
            // 计算需要的页数
            const pageHeight = pdfHeight - (margin * 2);
            const pageCount = Math.ceil(imgHeight / pageHeight);
            
            // 添加计划标题
            pdf.setFontSize(18);
            pdf.setTextColor(149, 209, 60);
            pdf.text("健身计划", pdfWidth / 2, margin, { align: "center" });
            
            // 计算实际每页高度比例
            const heightRatio = pageHeight / imgHeight;
            const widthPerPage = imgWidth;
            
            // 逐页添加内容
            for (let i = 0; i < pageCount; i++) {
              // 如果不是第一页，添加新页
              if (i > 0) {
                pdf.addPage();
              }
              
              // 计算当前页的显示位置
              const sourceY = i * canvasHeight * heightRatio;
              const sourceHeight = Math.min(canvasHeight - sourceY, canvasHeight / pageCount);
              
              // 添加页码
              pdf.setFontSize(10);
              pdf.setTextColor(100, 100, 100);
              pdf.text(`第 ${i + 1} 页 / 共 ${pageCount} 页`, pdfWidth - margin, pdfHeight - 5);
              
              // 添加图像部分
              pdf.addImage(
                imgData,
                'JPEG',
                margin,
                i === 0 ? margin + 10 : margin, // 第一页预留标题空间
                widthPerPage,
                pageHeight,
                '',
                'FAST',
                i === 0 ? 0 : -sourceY // 调整裁剪位置
              );
            }
          } else {
            // 内容在一页内，直接添加
            pdf.setFontSize(18);
            pdf.setTextColor(149, 209, 60);
            pdf.text("健身计划", pdfWidth / 2, margin, { align: "center" });
            
            pdf.addImage(
              imgData,
              'JPEG',
              margin,
              margin + 10, // 留出标题的空间
              imgWidth,
              imgHeight
            );
          }
          
          // 生成文件名称并保存
          const fileName = `健身计划_${this.formatDate(new Date())}.pdf`;
          pdf.save(fileName);
          
          // 完成导出
          finishExport();
        }).catch(error => {
          console.error('PDF导出过程中发生错误', error);
          document.body.removeChild(loadingMask);
          this.$message.error('PDF导出失败，请稍后重试');
        });
      } catch (error) {
        console.error('PDF导出失败', error);
        this.$message.error('PDF导出失败，请稍后重试');
      }
    },
    filteredVideos(category) {
      let filtered = this.combinedVideos();
      
      if (category !== 'all') {
        filtered = filtered.filter(video => {
          if (video.bvid) {
            // 数据库视频使用中文分类
            return video.category === this.getCategoryLabel(category);
          } else {
            // 本地视频使用英文分类
            return video.category === category;
          }
        });
      }
      
      if (this.videoSearchKeyword) {
        const keyword = this.videoSearchKeyword.toLowerCase();
        filtered = filtered.filter(video => video.title.toLowerCase().includes(keyword));
      }
      
      return filtered;
    },
    generatePlan() {
      // 如果是需要调用后端API的计划类型，调用后端API获取专业建议
      if (this.selectedGoal === 'bodybuilding' || this.selectedGoal === 'weight-loss' || 
          this.selectedGoal === 'muscle-gain' || this.selectedGoal === 'endurance' ||
          this.selectedGoal === 'general-fitness') {
        const startDate = this.formatDate(this.durationForm.startDate);
        // 清空现有计划内容
        this.otherAdvice.expertAdvice = '';
        this.generatedPlan.weeklyPlans = [];
        this.milestones = [];
        
        // 创建加载提示
        const loading = this.$loading({
          lock: true,
          text: `正在生成${this.getPlanTypeName()}计划，请耐心等待...`,
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        
        // 设置超时处理，大模型生成可能需要较长时间
        const timeout = setTimeout(() => {
          if (!this.otherAdvice.expertAdvice) {
            this.$message.info('计划生成中，响应可能较慢，请继续等待...');
          }
        }, 10000); // 10秒后提示用户继续等待
        
        // 根据选择的目标类型准备不同的数据
        let planData = {};
        let apiPath = '';
        
        if (this.selectedGoal === 'bodybuilding') {
          // 健美计划数据
          planData = {
            goal: "健美",
            targetBodyFat: this.goalForm.bodyFat,
            focusArea: this.goalForm.sculptingAreas.join('、'),
            trainingStyle: this.goalForm.trainingStyle,
            competitionPlan: this.goalForm.competitionPlan ? "有" : "无",
            startDate: startDate,
            duration: `${this.durationForm.duration}周`,
            trainingFrequency: `每周${this.durationForm.daysPerWeek}次`
          };
          apiPath = '/api/api/plan/bodybuilding';
        } else if (this.selectedGoal === 'weight-loss') {
          // 减脂计划数据
          planData = {
            goal: "减脂",
            targetWeight: this.goalForm.targetWeight,
            totalWeightLoss: this.goalForm.plannedWeightLoss,
            weeklyWeightLoss: this.goalForm.weeklyWeightLoss,
            focusArea: this.goalForm.focusAreas.join('、'),
            startDate: startDate,
            duration: `${this.durationForm.duration}周`,
            trainingFrequency: `每周${this.durationForm.daysPerWeek}次`
          };
          apiPath = '/api/api/plan/weight-loss';
        } else if (this.selectedGoal === 'muscle-gain') {
          // 增肌计划数据
          planData = {
            goal: "增肌",
            targetMuscleGain: this.goalForm.muscleGain,
            weeklyMuscleGain: this.goalForm.weeklyMuscleGain,
            focusArea: this.goalForm.muscleGroups.join('、'),
            strengthGoal: this.goalForm.strengthGoal,
            startDate: startDate,
            duration: `${this.durationForm.duration}周`,
            trainingFrequency: `每周${this.durationForm.daysPerWeek}次`
          };
          apiPath = '/api/api/plan/muscle-gain';
        } else if (this.selectedGoal === 'endurance') {
          // 耐力计划数据
          planData = {
            goal: "耐力",
            enduranceTarget: this.goalForm.enduranceTarget,
            currentStatus: this.goalForm.currentEndurance,
            targetPace: this.goalForm.targetPace,
            trainingPreference: this.goalForm.endurancePreference.join('、'),
            startDate: startDate,
            duration: `${this.durationForm.duration}周`,
            trainingFrequency: `每周${this.durationForm.daysPerWeek}次`
          };
          apiPath = '/api/api/plan/endurance';
        } else if (this.selectedGoal === 'general-fitness') {
          // 健康维持计划数据
          planData = {
            goal: "健康维持",
            healthTarget: this.goalForm.healthGoal,
            dailyActivityLevel: this.goalForm.activityLevel,
            healthIndicatorsFocus: this.goalForm.healthMarkers.join('、'),
            exercisePreference: this.goalForm.exercisePreference,
            startDate: startDate,
            duration: `${this.durationForm.duration}周`,
            trainingFrequency: `每周${this.durationForm.daysPerWeek}次`
          };
          apiPath = '/api/api/plan/health-maintenance';
        }
        
        // 先调用add接口保存计划基本信息
        axios.post(`${apiPath}/add`, planData)
          .then(addResponse => {
            if (addResponse.data.success) {
              // 为健康维持计划使用特定的API路径
              const adviceApiPath = this.selectedGoal === 'general-fitness' ? 
                '/api/api/plan/health-maintenance' : `/api/api/plan/${this.selectedGoal}`;
              
              // 保存成功后，获取计划详情
              axios.get(`${adviceApiPath}/advice?startDate=${startDate}`)
                .then(response => {
                  loading.close();
                  clearTimeout(timeout);
                  
                  if (response.data.success && response.data.advice) {
                    // 将后端返回的建议添加到其他建议中
                    this.otherAdvice.expertAdvice = response.data.advice;
                    
                    // 显示专家建议已加载的提示
                    this.$message.success(`已生成并保存专业${this.getPlanTypeName()}计划`);
                    
                    // 直接进入第四步显示计划详情
                    this.activeStep = 3;
                  } else {
                    // 如果后端没有返回建议内容，则不显示计划
                    this.$message.warning(`未能获取${this.getPlanTypeName()}计划建议，请稍后重试`);
                  }
                })
                .catch(error => {
                  loading.close();
                  clearTimeout(timeout);
                  console.error(`获取${this.getPlanTypeName()}计划建议失败`, error);
                  this.$message.error(`获取${this.getPlanTypeName()}计划建议失败，请稍后再试`);
                });
            } else {
              loading.close();
              clearTimeout(timeout);
              this.$message.error(`保存计划失败：${addResponse.data.message || '未知错误'}`);
            }
          })
          .catch(error => {
            loading.close();
            clearTimeout(timeout);
            console.error('保存健身计划失败', error);
            this.$message.error('保存计划失败，请稍后重试');
          });
      } else {
        // 其他类型的计划仍然使用本地生成
        this.generateWeeklyPlans();
        this.generateMilestones();
        this.generateNutritionPlan();
        
        // 进入第四步显示计划详情
        this.activeStep = 3;
      }
    },
    
    // 根据选择的目标类型获取计划类型名称
    getPlanTypeName() {
      switch(this.selectedGoal) {
        case 'bodybuilding':
          return '健美';
        case 'weight-loss':
          return '减脂';
        case 'muscle-gain':
          return '增肌';
        case 'endurance':
          return '耐力';
        case 'general-fitness':
          return '健康维持';
        default:
          return '健身';
      }
    },
    generateWeeklyPlans() {
      const weekCount = parseInt(this.durationForm.duration);
      const daysPerWeek = parseInt(this.durationForm.daysPerWeek);
      
      let weeklyPlans = [];
      
      for (let week = 1; week <= weekCount; week++) {
        let days = [];
        
        for (let day = 0; day < 7; day++) {
          const isTrainingDay = this.isTrainingDay(day, daysPerWeek);
          
          if (isTrainingDay) {
            let workout = this.generateWorkout(week, day);
            days.push(workout);
          } else {
            days.push({
              isRestDay: true
            });
          }
        }
        
        weeklyPlans.push({
          weekNumber: week,
          days: days
        });
      }
      
      this.generatedPlan.weeklyPlans = weeklyPlans;
      this.activeWeek = "1";
    },
    isTrainingDay(day, daysPerWeek) {
      switch(parseInt(daysPerWeek)) {
        case 2:
          return day === 1 || day === 4;
        case 3:
          return day === 1 || day === 3 || day === 5;
        case 4:
          return day === 1 || day === 2 || day === 4 || day === 5;
        case 5:
          return day === 1 || day === 2 || day === 3 || day === 4 || day === 5;
        case 6:
          return day !== 6;
        default:
          return day === 1 || day === 3 || day === 5;
      }
    },
    generateWorkout(week, day) {
      let workout = {
        isRestDay: false,
        focus: '',
        exercises: []
      };
      
      switch(this.selectedGoal) {
        case 'weight-loss':
          return this.generateWeightLossWorkout(week, day);
        case 'muscle-gain':
          return this.generateMuscleGainWorkout(week, day);
        case 'bodybuilding':
          return this.generateBodybuildingWorkout(week, day);
        case 'endurance':
          return this.generateEnduranceWorkout(week, day);
        case 'general-fitness':
          return this.generateGeneralFitnessWorkout(week, day);
        default:
          return workout;
      }
    },
    generateWeightLossWorkout(week, day) {
      let workout = {
        isRestDay: false,
        focus: '',
        exercises: []
      };
      
      // 根据星期几安排不同的训练重点
      switch(day) {
        case 1: // 周一
          workout.focus = '全身有氧 + 下肢力量';
          workout.exercises = [
            { name: '热身: 慢跑', sets: '1', reps: '5-10分钟', videoId: 'v3' },
            { name: '深蹲', sets: '3', reps: '12-15次', videoId: 'v1' },
            { name: '箭步蹲', sets: '3', reps: '10-12次/侧', videoId: 'v1' },
            { name: '高强度间歇训练', sets: '4', reps: '30秒全力，30秒休息', videoId: 'v3' },
            { name: '拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' }
          ];
          break;
        case 3: // 周三
          workout.focus = '有氧 + 核心训练';
          workout.exercises = [
            { name: '热身: 动态拉伸', sets: '1', reps: '5分钟', videoId: 'v4' },
            { name: '核心训练', sets: '3', reps: '每组训练2分钟', videoId: 'v5' },
            { name: '中等强度有氧', sets: '1', reps: '30-40分钟', videoId: 'v7' },
            { name: '拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' }
          ];
          break;
        case 5: // 周五
          workout.focus = '全身力量训练';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5-10分钟', videoId: 'v7' },
            { name: '胸部推举', sets: '3', reps: '12-15次', videoId: 'v2' },
            { name: '哑铃划船', sets: '3', reps: '12-15次', videoId: 'v6' },
            { name: '哑铃肩推', sets: '3', reps: '12-15次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' }
          ];
          break;
        default:
          workout.isRestDay = true;
      }
      
      return workout;
    },
    generateMuscleGainWorkout(week, day) {
      let workout = {
        isRestDay: false,
        focus: '',
        exercises: []
      };
      
      // 根据星期几安排不同的训练重点
      switch(day) {
        case 1: // 周一
          workout.focus = '胸部和肱三头肌';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '平板卧推', sets: '4', reps: '6-8次', videoId: 'v2' },
            { name: '哑铃飞鸟', sets: '3', reps: '8-10次', videoId: 'v2' },
            { name: '绳索下拉', sets: '3', reps: '10-12次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 3: // 周三
          workout.focus = '背部和肱二头肌';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '引体向上/辅助引体向上', sets: '4', reps: '6-8次', videoId: 'v6' },
            { name: '坐姿划船', sets: '3', reps: '8-10次', videoId: 'v6' },
            { name: '哑铃弯举', sets: '3', reps: '10-12次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 5: // 周五
          workout.focus = '腿部和肩部';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '深蹲', sets: '4', reps: '6-8次', videoId: 'v1' },
            { name: '腿举', sets: '3', reps: '8-10次', videoId: 'v1' },
            { name: '哑铃肩推', sets: '3', reps: '8-10次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        default:
          workout.isRestDay = true;
      }
      
      return workout;
    },
    generateBodybuildingWorkout(week, day) {
      let workout = {
        isRestDay: false,
        focus: '',
        exercises: []
      };
      
      // 采用经典的健美训练分化
      switch(day) {
        case 1: // 周一
          workout.focus = '胸部和肱三头肌';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '平板卧推', sets: '4', reps: '8-12次', videoId: 'v2' },
            { name: '上斜卧推', sets: '3', reps: '8-12次', videoId: 'v2' },
            { name: '哑铃飞鸟', sets: '3', reps: '10-15次', videoId: 'v2' },
            { name: '绳索下拉', sets: '4', reps: '10-15次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 2: // 周二
          workout.focus = '背部和肱二头肌';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '引体向上', sets: '4', reps: '8-12次', videoId: 'v6' },
            { name: '坐姿划船', sets: '3', reps: '8-12次', videoId: 'v6' },
            { name: '俯身飞鸟', sets: '3', reps: '10-15次', videoId: 'v6' },
            { name: '杠铃弯举', sets: '3', reps: '8-12次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 3: // 周三
          workout.focus = '腿部';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '深蹲', sets: '4', reps: '8-12次', videoId: 'v1' },
            { name: '腿举', sets: '3', reps: '10-15次', videoId: 'v1' },
            { name: '腿弯举', sets: '3', reps: '10-15次', videoId: 'v1' },
            { name: '站姿小腿提升', sets: '4', reps: '12-20次', videoId: 'v1' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 4: // 周四
          workout.focus = '肩部和核心';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '哑铃肩推', sets: '4', reps: '8-12次', videoId: 'v6' },
            { name: '侧平举', sets: '3', reps: '10-15次', videoId: 'v6' },
            { name: '俯身飞鸟', sets: '3', reps: '10-15次', videoId: 'v6' },
            { name: '核心训练', sets: '3', reps: '各动作30-60秒', videoId: 'v5' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 5: // 周五
          workout.focus = '手臂和小肌群';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '杠铃弯举', sets: '3', reps: '8-12次', videoId: 'v6' },
            { name: '窄距卧推', sets: '3', reps: '8-12次', videoId: 'v2' },
            { name: '绳索下拉', sets: '3', reps: '10-15次', videoId: 'v6' },
            { name: '前臂训练', sets: '3', reps: '12-15次', videoId: 'v6' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        default:
          workout.isRestDay = true;
      }
      
      return workout;
    },
    generateEnduranceWorkout(week, day) {
      let workout = {
        isRestDay: false,
        focus: '',
        exercises: []
      };
      
      // 耐力训练计划
      switch(day) {
        case 1: // 周一
          workout.focus = '有氧耐力训练';
          workout.exercises = [
            { name: '热身: 动态拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' },
            { name: '中等强度跑步/游泳/骑行', sets: '1', reps: '30-45分钟', videoId: 'v3' },
            { name: '拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' }
          ];
          break;
        case 3: // 周三
          workout.focus = '间歇训练';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5-10分钟', videoId: 'v7' },
            { name: '高强度间歇训练', sets: '6-8', reps: '1分钟高强度，2分钟恢复', videoId: 'v3' },
            { name: '核心训练', sets: '2', reps: '各动作30秒', videoId: 'v5' },
            { name: '拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' }
          ];
          break;
        case 5: // 周五
          workout.focus = '长距离耐力训练';
          workout.exercises = [
            { name: '热身: 动态拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' },
            { name: '低强度长距离训练', sets: '1', reps: '45-60分钟', videoId: 'v7' },
            { name: '拉伸', sets: '1', reps: '5-10分钟', videoId: 'v4' }
          ];
          break;
        default:
          workout.isRestDay = true;
      }
      
      return workout;
    },
    generateGeneralFitnessWorkout(week, day) {
      let workout = {
        isRestDay: false,
        focus: '',
        exercises: []
      };
      
      // 一般健身计划，全面平衡发展
      switch(day) {
        case 1: // 周一
          workout.focus = '全身力量训练';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '深蹲', sets: '3', reps: '10-12次', videoId: 'v1' },
            { name: '胸部推举', sets: '3', reps: '10-12次', videoId: 'v2' },
            { name: '划船', sets: '3', reps: '10-12次', videoId: 'v6' },
            { name: '核心训练', sets: '2', reps: '30秒/动作', videoId: 'v5' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 3: // 周三
          workout.focus = '有氧训练';
          workout.exercises = [
            { name: '热身: 动态拉伸', sets: '1', reps: '5分钟', videoId: 'v4' },
            { name: '中等强度有氧', sets: '1', reps: '30分钟', videoId: 'v7' },
            { name: '间歇冲刺', sets: '5', reps: '30秒冲刺，90秒恢复', videoId: 'v3' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        case 5: // 周五
          workout.focus = '灵活性和平衡';
          workout.exercises = [
            { name: '热身: 轻度有氧', sets: '1', reps: '5分钟', videoId: 'v7' },
            { name: '瑜伽基本姿势', sets: '1', reps: '15-20分钟', videoId: 'v8' },
            { name: '平衡训练', sets: '2', reps: '各姿势30秒', videoId: 'v8' },
            { name: '核心训练', sets: '2', reps: '各动作30秒', videoId: 'v5' },
            { name: '拉伸', sets: '1', reps: '5分钟', videoId: 'v4' }
          ];
          break;
        default:
          workout.isRestDay = true;
      }
      
      return workout;
    },
    generateMilestones() {
      // 生成阶段性目标
      const weekCount = parseInt(this.durationForm.duration);
      const milestones = [];
      
      // 根据不同的目标类型生成不同的里程碑
      switch(this.selectedGoal) {
        case 'weight-loss':
          this.generateWeightLossMilestones(milestones, weekCount);
          break;
        case 'muscle-gain':
          this.generateMuscleGainMilestones(milestones, weekCount);
          break;
        case 'bodybuilding':
          this.generateBodybuildingMilestones(milestones, weekCount);
          break;
        case 'endurance':
          this.generateEnduranceMilestones(milestones, weekCount);
          break;
        case 'general-fitness':
          this.generateGeneralFitnessMilestones(milestones, weekCount);
          break;
      }
      
      this.milestones = milestones;
    },
    generateWeightLossMilestones(milestones, weekCount) {
      const targetLoss = this.goalForm.currentWeight - this.goalForm.targetWeight;
      const weeklyRate = targetLoss / weekCount;
      
      milestones.push({
        time: '第1周',
        title: '适应期',
        content: '适应训练节奏，建立运动习惯，饮食控制摄入热量。',
        type: 'primary',
        color: '#409EFF'
      });
      
      if (weekCount >= 4) {
        milestones.push({
          time: `第${Math.floor(weekCount/4)}周`,
          title: '初步成果',
          content: `目标减重约${(weeklyRate * Math.floor(weekCount/4)).toFixed(1)}kg，提高有氧耐力。`,
          type: 'success',
          color: '#67C23A'
        });
      }
      
      if (weekCount >= 8) {
        milestones.push({
          time: `第${Math.floor(weekCount/2)}周`,
          title: '中期检查',
          content: `目标减重约${(weeklyRate * Math.floor(weekCount/2)).toFixed(1)}kg，新陈代谢提高。`,
          type: 'warning',
          color: '#E6A23C'
        });
      }
      
      milestones.push({
        time: `第${weekCount}周`,
        title: '目标完成',
        content: `达到目标体重${this.goalForm.targetWeight}kg，巩固健康饮食习惯。`,
        type: 'danger',
        color: '#F56C6C'
      });
    },
    generateMuscleGainMilestones(milestones, weekCount) {
      const muscleGain = this.goalForm.muscleGain;
      const weeklyRate = muscleGain / weekCount;
      
      milestones.push({
        time: '第1周',
        title: '适应期',
        content: '适应训练强度，提高蛋白质摄入，建立正确训练姿势。',
        type: 'primary',
        color: '#409EFF'
      });
      
      if (weekCount >= 4) {
        milestones.push({
          time: `第${Math.floor(weekCount/4)}周`,
          title: '初步成果',
          content: `力量提升约10%，肌肉增加约${(weeklyRate * Math.floor(weekCount/4)).toFixed(1)}kg。`,
          type: 'success',
          color: '#67C23A'
        });
      }
      
      if (weekCount >= 8) {
        milestones.push({
          time: `第${Math.floor(weekCount/2)}周`,
          title: '中期检查',
          content: `力量提升约20%，肌肉增加约${(weeklyRate * Math.floor(weekCount/2)).toFixed(1)}kg。`,
          type: 'warning',
          color: '#E6A23C'
        });
      }
      
      milestones.push({
        time: `第${weekCount}周`,
        title: '目标完成',
        content: `力量显著提升，肌肉增加约${muscleGain}kg，提高整体肌肉围度。`,
        type: 'danger',
        color: '#F56C6C'
      });
    },
    generateBodybuildingMilestones(milestones, weekCount) {
      const targetBodyFat = this.goalForm.bodyFat;
      
      milestones.push({
        time: '第1周',
        title: '适应期',
        content: '适应训练分化，掌握正确姿势形态，调整饮食增加蛋白质摄入。',
        type: 'primary',
        color: '#409EFF'
      });
      
      if (weekCount >= 4) {
        milestones.push({
          time: `第${Math.floor(weekCount/4)}周`,
          title: '初步成果',
          content: '肌肉线条初步显现，体脂率下降，主要肌群体积增加。',
          type: 'success',
          color: '#67C23A'
        });
      }
      
      if (weekCount >= 8) {
        milestones.push({
          time: `第${Math.floor(weekCount/2)}周`,
          title: '中期检查',
          content: '肌肉分离度提高，体脂率继续下降，肌肉对称性改善。',
          type: 'warning',
          color: '#E6A23C'
        });
      }
      
      milestones.push({
        time: `第${weekCount}周`,
        title: '目标完成',
        content: `达到目标体脂率${targetBodyFat}%，肌肉线条清晰，整体肌肉平衡发展。`,
        type: 'danger',
        color: '#F56C6C'
      });
    },
    generateEnduranceMilestones(milestones, weekCount) {
      const enduranceTarget = this.goalForm.enduranceTarget;
      
      milestones.push({
        time: '第1周',
        title: '适应期',
        content: '适应基础有氧训练，建立心肺基础，掌握正确呼吸节奏。',
        type: 'primary',
        color: '#409EFF'
      });
      
      if (weekCount >= 4) {
        milestones.push({
          time: `第${Math.floor(weekCount/4)}周`,
          title: '初步成果',
          content: '有氧能力提升，训练距离/时间增加25%，恢复能力提高。',
          type: 'success',
          color: '#67C23A'
        });
      }
      
      if (weekCount >= 8) {
        milestones.push({
          time: `第${Math.floor(weekCount/2)}周`,
          title: '中期检查',
          content: '有氧能力显著提升，训练距离/时间增加50%，乳酸耐受能力增强。',
          type: 'warning',
          color: '#E6A23C'
        });
      }
      
      milestones.push({
        time: `第${weekCount}周`,
        title: '目标完成',
        content: `达成${enduranceTarget}的目标，心肺功能显著增强，整体耐力大幅提高。`,
        type: 'danger',
        color: '#F56C6C'
      });
    },
    generateGeneralFitnessMilestones(milestones, weekCount) {
      milestones.push({
        time: '第1周',
        title: '适应期',
        content: '建立规律运动习惯，掌握基本动作，优化饮食结构。',
        type: 'primary',
        color: '#409EFF'
      });
      
      if (weekCount >= 4) {
        milestones.push({
          time: `第${Math.floor(weekCount/4)}周`,
          title: '初步成果',
          content: '日常活力提升，睡眠质量改善，基础代谢提高。',
          type: 'success',
          color: '#67C23A'
        });
      }
      
      if (weekCount >= 8) {
        milestones.push({
          time: `第${Math.floor(weekCount/2)}周`,
          title: '中期检查',
          content: '体能全面提升，体态改善，健康指标优化。',
          type: 'warning',
          color: '#E6A23C'
        });
      }
      
      milestones.push({
        time: `第${weekCount}周`,
        title: '目标完成',
        content: '实现健康生活方式，形成长期运动习惯，全面提高生活质量。',
        type: 'danger',
        color: '#F56C6C'
      });
    },
    generateNutritionPlan() {
      const gender = this.goalForm.gender;
      const weight = this.goalForm.currentWeight;
      const height = this.goalForm.height;
      const age = this.goalForm.age;
      
      let bmr = 0;
      if (gender === 'male') {
        bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
      } else {
        bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
      }
      
      let calorieMultiplier = 1.2;
      
      const daysPerWeek = parseInt(this.durationForm.daysPerWeek);
      if (daysPerWeek >= 5) {
        calorieMultiplier = 1.6;
      } else if (daysPerWeek >= 3) {
        calorieMultiplier = 1.4;
      }
      
      let dailyCalories = Math.round(bmr * calorieMultiplier);
      let proteinPerKg = 1.6;
      let carbRatio = 0.45;
      let fatRatio = 0.25;
      
      switch(this.selectedGoal) {
        case 'weight-loss':
          dailyCalories = Math.round(dailyCalories * 0.8);
          proteinPerKg = 2.0;
          carbRatio = 0.35;
          fatRatio = 0.25;
          break;
        case 'muscle-gain':
          dailyCalories = Math.round(dailyCalories * 1.1);
          proteinPerKg = 2.2;
          carbRatio = 0.5;
          fatRatio = 0.25;
          break;
        case 'bodybuilding':
          dailyCalories = Math.round(dailyCalories * 1.05);
          proteinPerKg = 2.4;
          carbRatio = 0.4;
          fatRatio = 0.25;
          break;
        case 'endurance':
          dailyCalories = Math.round(dailyCalories * 1.15);
          proteinPerKg = 1.8;
          carbRatio = 0.6;
          fatRatio = 0.2;
          break;
        case 'general-fitness':
          break;
      }
      
      const protein = Math.round(weight * proteinPerKg);
      const carbs = Math.round((dailyCalories * carbRatio) / 4);
      const fat = Math.round((dailyCalories * fatRatio) / 9);
      
      this.nutritionPlan.calories = dailyCalories;
      this.nutritionPlan.protein = protein;
      this.nutritionPlan.carbs = carbs;
      this.nutritionPlan.fat = fat;
      
      this.updateMealSuggestions();
    },
    updateMealSuggestions() {
      switch(this.selectedGoal) {
        case 'weight-loss':
          this.nutritionPlan.meals = {
            breakfast: '蛋白质燕麦(40g燕麦+30g蛋白粉+少量浆果)+无糖黑咖啡',
            lunch: '150g鸡胸肉+100g糙米+大量蔬菜沙拉(配低脂沙拉酱)',
            dinner: '150g白肉鱼/虾+绿叶蔬菜+少量红薯',
            snacks: '训练前：一个苹果；训练后：30g蛋白粉+一个香蕉'
          };
          break;
        case 'muscle-gain':
          this.nutritionPlan.meals = {
            breakfast: '4个鸡蛋(2个全蛋+2个蛋白)+80g燕麦+一杯牛奶+一个香蕉',
            lunch: '180g牛肉/鸡胸肉+150g糙米/红薯+蔬菜',
            dinner: '180g三文鱼/牛排+150g意大利面/米饭+蔬菜',
            snacks: '训练前：50g麦片+一勺花生酱；训练后：40g蛋白粉+一个香蕉+5g肌酸'
          };
          break;
        case 'bodybuilding':
          this.nutritionPlan.meals = {
            breakfast: '蛋白质煎饼(5个蛋白+1个全蛋+30g燕麦)+50g水果',
            lunch: '180g鸡胸肉+120g糙米/甜薯+绿叶蔬菜',
            dinner: '180g瘦牛肉/白鱼+100g糙米/藜麦+大量蔬菜',
            snacks: '训练前：30g杏仁+一个苹果；训练后：40g乳清蛋白+5g肌酸+一勺蜂蜜'
          };
          break;
        case 'endurance':
          this.nutritionPlan.meals = {
            breakfast: '80g燕麦+香蕉+蜂蜜+一杯酸奶',
            lunch: '150g鸡胸肉/金枪鱼+150g糙米/意大利面+蔬菜',
            dinner: '150g白肉+150g土豆/甜薯+大量蔬菜',
            snacks: '训练前：能量棒+运动饮料；训练中/后：香蕉+运动饮料+30g蛋白质'
          };
          break;
        case 'general-fitness':
          this.nutritionPlan.meals = {
            breakfast: '全麦面包+2个鸡蛋+牛油果+一杯酸奶+水果',
            lunch: '150g鸡胸肉/豆腐+100g糙米/藜麦+蔬菜沙拉',
            dinner: '150g鱼/瘦肉+蒸蔬菜+少量红薯/糙米',
            snacks: '坚果混合物+水果；训练后：蛋白奶昔或希腊酸奶+水果'
          };
          break;
      }
    },
    getDayName(index) {
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return days[index];
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 定义获取用户信息的方法
    getUserInfo() {
      // 这里应该实现从服务器获取用户信息的逻辑
      // 例如使用axios发送请求
      // axios.get('/api/user/info').then(response => {
      //   const userInfo = response.data;
      //   this.goalForm.currentWeight = userInfo.weight;
      //   this.goalForm.height = userInfo.height;
      //   this.goalForm.age = userInfo.age;
      //   this.goalForm.gender = userInfo.gender;
      // }).catch(error => {
      //   console.error('获取用户信息失败', error);
      //   this.$message.error('获取用户信息失败，请刷新页面重试');
      // });
      
      // 模拟从服务器获取数据
      console.log('从服务器获取用户信息');
    },
    formatExpertAdvice(advice) {
      // 将Markdown格式转换为HTML
      if (!advice) return '';
      
      // 处理可能的居中对齐问题，确保左对齐
      let formattedAdvice = advice
        // 基本Markdown转换
        .replace(/\n/g, '<br>')  // 换行符转为<br>
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // **文字** 转为 <strong>文字</strong>
        .replace(/\*(.*?)\*/g, '<em>$1</em>')  // *文字* 转为 <em>文字</em>
        
        // 标题转换，确保左对齐和一致的样式
        .replace(/# (.*?)$/gm, '<h1 style="text-align:left; font-size:16px; margin:16px 0 10px 0; font-weight:bold; color:#333;">$1</h1>')
        .replace(/## (.*?)$/gm, '<h2 style="text-align:left; font-size:16px; margin:16px 0 10px 0; font-weight:bold; color:#333;">$1</h2>')
        .replace(/### (.*?)$/gm, '<h3 style="text-align:left; font-size:16px; margin:16px 0 10px 0; font-weight:bold; color:#333;">$1</h3>')
        
        // 特殊处理中文标题格式，如"一、阶段建议"
        .replace(/([一二三四五六七八九十]+、[^\n<]+)(<br>|$)/gm, '<h2 style="text-align:left; font-size:16px; margin:16px 0 10px 0; font-weight:bold; color:#333;">$1</h2>')
        
        // 特殊处理子标题格式，如"适应期(1-3周)"
        .replace(/([^\n•<][^\n<]*\([0-9]+[-~][0-9]+周\))(<br>|$)/gm, '<h3 style="text-align:left; font-size:15px; margin:12px 0 8px 0; font-weight:bold; color:#333;">$1</h3>')
        
        // 列表项处理，确保一致样式
        .replace(/• ([^\n<]+)(<br>|$)/gm, '<li style="text-align:left; font-size:14px; margin:6px 0; line-height:1.5;">$1</li>')
        
        // 分隔线
        .replace(/---/g, '<hr style="border-top:1px solid #eee; margin:15px 0;">')
        
        // 链接处理
        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" style="color:#67C23A">$1</a>');
      
      // 包装列表项到ul中，确保统一样式
      formattedAdvice = formattedAdvice.replace(/<li[^>]*>(.*?)<\/li>/g, function(match) {
        if (match.indexOf('<ul') === -1) {
          return '<ul style="padding-left:20px; margin:8px 0; list-style-type:disc;">' + match + '</ul>';
        }
        return match;
      });
      
      // 合并相邻的ul标签
      formattedAdvice = formattedAdvice.replace(/<\/ul><ul[^>]*>/g, '');
      
      // 替换连续br为段落分隔
      formattedAdvice = formattedAdvice.replace(/<br><br>/g, '</p><p style="text-align:left; font-size:14px; margin:6px 0; line-height:1.5;">');
      
      // 处理普通段落文本
      formattedAdvice = formattedAdvice.replace(/([^<>\n]{3,})(<br>|$)/g, function(match, p1, p2) {
        // 跳过已经处理过的HTML内容
        if (p1.includes('<') || p1.includes('>')) return match;
        return '<p style="text-align:left; font-size:14px; margin:6px 0; line-height:1.5;">' + p1 + '</p>';
      });
      
      // 确保所有内容有正确的开始和结束标签
      if (!formattedAdvice.startsWith('<')) {
        formattedAdvice = '<p style="text-align:left; font-size:14px; margin:6px 0; line-height:1.5;">' + formattedAdvice;
      }
      
      return formattedAdvice;
    },
    // 获取合并后的视频列表
    combinedVideos() {
      // 合并本地视频和从数据库获取的视频
      return [...this.trainingVideos, ...this.bilibiliVideos];
    },
    // 根据视频类别获取默认封面图片
    getDefaultThumbnail(category) {
      // 根据视频类别返回合适的默认封面图片
      switch (category) {
        case '力量训练':
          return 'https://images.unsplash.com/photo-1574680178050-55c6a6a96e0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80';
        case '有氧训练':
          return 'https://images.unsplash.com/photo-1486218119243-13883505764c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80';
        case '灵活性':
          return 'https://images.unsplash.com/photo-1552196563-55cd4e45efb3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80';
        case '核心训练':
          return 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80';
        default:
          // 默认封面
          return 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80';
      }
    },
    // 根据B站视频ID和类别分配独特的封面图片
    getBilibiliThumbnail(bvid, category, p = 1) {
      // 为不同类别的视频准备多种封面选项
      const thumbnails = {
        '力量训练': [
          'https://images.unsplash.com/photo-1574680178050-55c6a6a96e0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1532029837206-abbe2b7620e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1605296867424-35fc25c9212a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1517838277536-f5f99be501cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1533560777802-046814bc297c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1576678927484-cc907957088c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1594381898411-846e7d193883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1584735935682-2f2b69dff9d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1581009137042-c552e485697a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1597452485669-2c7bb5fef90d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1604480132736-44c188fe4d20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1579758629938-03607ccdbaba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1591940742878-13aba4b7a585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1603287681836-b174ce5074c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1599058917765-a780eda07a3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1596357395217-80de13130e92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80'
        ],
        '有氧训练': [
          'https://images.unsplash.com/photo-1486218119243-13883505764c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1549060279-7e168fcee0c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1571008887538-b36bb32f4571?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1434596922112-19c563067271?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1601422407692-ec4eeec1d9b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1607962837359-5e7e89f86776?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1595078475328-1ab05d0a6a0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1590766740616-0fe2a2a2a58a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1517931524326-bdd55a541177?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1596357395217-80de13130e92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80'
        ],
        '灵活性': [
          'https://images.unsplash.com/photo-1552196563-55cd4e45efb3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1510894347713-fc3ed6fdf539?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1599447292180-45fd84092ef4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1588286840104-8457c3904487?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1593164842264-854604db2260?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1566501206188-5dd0cf160a0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80'
        ],
        '核心训练': [
          'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1616803689943-5601631c7fec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1594737625785-a6cbdabd333c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1571019613591-2aec3feb7d24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1607962837359-5e7e89f86776?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1599058917212-d750089bc07e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1566241440091-ec10de8db2e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1601422407692-ec4eeec1d9b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1518310952931-b1de897abd40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80'
        ],
        '默认': [
          'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1571019613591-2aec3feb7d24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1574680096145-d05b474e2155?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80',
          'https://images.unsplash.com/photo-1518310383802-640c2de311b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=180&q=80'
        ]
      };

      // 获取该类别的封面图片数组，如果类别不存在则使用默认图片
      const categoryThumbnails = thumbnails[category] || thumbnails['默认'];
      
      // 使用bvid和p值的组合来确保同一视频获得相同的封面，但不同视频获得不同的封面
      // 将p值添加到bvid中以区分同一BV号下的不同分P视频
      const videoId = `${bvid}-p${p}`;
      const hash = this.simpleHash(videoId);
      const index = hash % categoryThumbnails.length;
      
      return categoryThumbnails[index];
    },
    // 简单的字符串哈希函数，用于从bvid生成一个数字
    simpleHash(str) {
      let hash = 0;
      for (let i = 0; i < str.length; i++) {
        const char = str.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // Convert to 32bit integer
      }
      return Math.abs(hash);
    },
    backToPlanner() {
      this.showVideoLibrary = false;
    },
  },
  mounted() {
    // 页面加载完成后的操作
    // 这里应该从服务器获取用户信息（体重、身高、年龄、性别等）
    this.getUserInfo();
    
    // 从API获取视频数据
    axios.get('/api/videos')
      .then(res => {
        if (res.data && Array.isArray(res.data)) {
          // 处理视频数据，确保每个视频都有封面图片
          this.bilibiliVideos = res.data.map(video => {
            // 如果视频没有缩略图，根据视频ID分配独特封面
            if (!video.thumbnail) {
              video.thumbnail = this.getBilibiliThumbnail(video.bvid, video.category, video.p);
            }
            return video;
          });
        } else {
          console.error('API返回的视频数据格式不正确');
          this.bilibiliVideos = [];
        }
      })
      .catch(error => {
        console.error('获取视频数据失败:', error);
        this.bilibiliVideos = [];
        this.$message.error('获取视频数据失败，请稍后重试');
      });
  },
  beforeDestroy() {
    // 页面销毁前的清理操作
  }
}
</script>

<style scoped>
.fitness-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f8ffed 0%, #d6f0a8 50%, #c4e696 100%);
  min-height: 100vh;
  background-attachment: fixed;
  position: relative;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(151, 192, 15, 0.2);
  padding: 25px;
  border: 1px solid #eaff8f;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.steps-nav {
  margin-bottom: 20px;
}

.step-content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.step-panel {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* 步骤二和步骤三使用坚决的定位防止滚动 */
.step-panel[v-show="activeStep === 1"],
.step-panel[v-show="activeStep === 2"] {
  position: relative;
  height: auto;
}

/* 表单使用更紧凑的布局和更小的元素 */
.step-panel[v-show="activeStep === 1"] .el-form,
.step-panel[v-show="activeStep === 2"] .el-form {
  display: flex;
  flex-direction: column;
}

.step-panel[v-show="activeStep === 1"] .el-form-item,
.step-panel[v-show="activeStep === 2"] .el-form-item {
  margin-bottom: 6px;
}

.step-panel[v-show="activeStep === 1"] .el-form-item__label,
.step-panel[v-show="activeStep === 2"] .el-form-item__label {
  line-height: 24px;
  padding-bottom: 0;
}

.step-panel[v-show="activeStep === 1"] .el-form-item__content,
.step-panel[v-show="activeStep === 2"] .el-form-item__content {
  line-height: 24px;
}

/* 优化复选框布局 */
.step-panel[v-show="activeStep === 1"] .el-checkbox-group,
.step-panel[v-show="activeStep === 2"] .el-checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.step-panel[v-show="activeStep === 1"] .el-checkbox,
.step-panel[v-show="activeStep === 2"] .el-checkbox {
  margin-right: 0;
  margin-left: 0;
  white-space: nowrap;
  height: auto;
  line-height: normal;
}

/* 设置表单控件为固定高度 */
.step-panel[v-show="activeStep === 1"] .el-input__inner,
.step-panel[v-show="activeStep === 2"] .el-input__inner,
.step-panel[v-show="activeStep === 1"] .el-select .el-input__inner,
.step-panel[v-show="activeStep === 2"] .el-select .el-input__inner,
.step-panel[v-show="activeStep === 1"] .el-input-number__decrease,
.step-panel[v-show="activeStep === 1"] .el-input-number__increase,
.step-panel[v-show="activeStep === 2"] .el-input-number__decrease,
.step-panel[v-show="activeStep === 2"] .el-input-number__increase,
.step-panel[v-show="activeStep === 2"] .el-date-editor,
.step-panel[v-show="activeStep === 2"] .el-date-editor .el-input__inner {
  height: 28px;
  line-height: 28px;
}

.goal-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
  justify-content: center;
}

.goal-card {
  width: calc(20% - 16px);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-align: center;
  border-color: #e6f7a4;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(151, 192, 15, 0.15);
  padding: 20px 10px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.goal-card:hover {
  box-shadow: 0 10px 25px rgba(151, 192, 15, 0.25);
  transform: translateY(-10px);
  background-color: rgba(248, 255, 237, 0.95);
}

.goal-card.selected {
  border-color: #95d13c;
  box-shadow: 0 12px 30px rgba(151, 192, 15, 0.4);
  transform: translateY(-12px) scale(1.05);
  background-color: rgba(248, 255, 237, 0.98);
  border-width: 2px;
}

.goal-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: #8dc63f;
  background: rgba(232, 245, 205, 0.7);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.goal-card:hover .goal-icon {
  background: rgba(149, 209, 60, 0.2);
  transform: scale(1.1);
}

.goal-card h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #546e7a;
  transition: all 0.3s ease;
  line-height: 1.2;
}

.goal-card:hover h3 {
  color: #8dc63f;
}

.goal-card p {
  font-size: 12px;
  color: #78909c;
  line-height: 1.4;
  margin: 0;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 15px;
}

.notice-text {
  font-size: 16px;
  color: #F56C6C;
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background-color: #FEF0F0;
  border-radius: 4px;
  border-left: 3px solid #F56C6C;
}

.form-info {
  background-color: #f8ffed;
  padding: 10px 15px;
  margin-top: 15px;
  border-radius: 4px;
  color: #606266;
  font-size: 14px;
}

.notice-text {
  font-size: 16px;
  color: #F56C6C;
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background-color: #FEF0F0;
  border-radius: 4px;
  border-left: 3px solid #F56C6C;
}

.plan-result {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.plan-overview, 
.milestone-targets, 
.weekly-plan, 
.nutrition-advice, 
.additional-advice {
  margin-bottom: 30px;
  border: none;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(151, 192, 15, 0.15);
  overflow: hidden;
  transition: all 0.35s ease;
}

.plan-overview:hover, 
.milestone-targets:hover, 
.weekly-plan:hover, 
.nutrition-advice:hover, 
.additional-advice:hover {
  box-shadow: 0 12px 30px rgba(151, 192, 15, 0.25);
  transform: translateY(-8px);
}

/* 卡片标题栏样式 */
::v-deep .el-card__header {
  padding: 15px 20px;
  background: linear-gradient(to right, #f8ffed, #e6f7a4);
  border-bottom: none;
}

::v-deep .el-card__header span {
  font-size: 16px;
  font-weight: 600;
  color: #546e7a;
}

::v-deep .el-card__body {
  padding: 20px;
}

.goal-summary {
  line-height: 1.6;
}

.goal-summary h3 {
  color: #95d13c;
  margin-top: 0;
}

.weekly-schedule {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.day-card {
  padding: 15px;
  border-radius: 12px;
  background-color: #f8ffed;
  height: 100%;
  min-height: 150px;
  box-shadow: 0 4px 12px rgba(151, 192, 15, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(151, 192, 15, 0.1);
}

.day-card:hover {
  box-shadow: 0 8px 16px rgba(151, 192, 15, 0.2);
  transform: translateY(-5px);
}

.rest-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
}

.rest-day i {
  font-size: 30px;
  margin-bottom: 10px;
}

.workout-info {
  height: 100%;
}

.workout-info h5 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
  color: #8dc63f;
}

.exercise-list {
  font-size: 13px;
}

.exercise-item {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dotted #eaff8f;
  display: flex;
  flex-direction: column;
}

.exercise-name {
  font-weight: 600;
}

.exercise-detail {
  color: #606266;
  margin: 5px 0;
}

.macro-nutrients {
  margin-bottom: 20px;
}

.macro-nutrients h3,
.meal-suggestions h3 {
  margin-top: 0;
  color: #95d13c;
  font-size: 16px;
  margin-bottom: 15px;
}

.nutrient-box {
  background-color: #f8ffed;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(151, 192, 15, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.nutrient-box:hover {
  box-shadow: 0 8px 20px rgba(151, 192, 15, 0.15);
  transform: translateY(-5px);
}

.nutrient-box h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #546e7a;
  font-size: 15px;
}

.nutrient-value {
  font-size: 28px;
  font-weight: 600;
  color: #8dc63f;
  margin: 0;
}

.calorie-total {
  text-align: center;
  margin-top: 15px;
  font-weight: 600;
  font-size: 16px;
  color: #606266;
}

.advice-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.advice-item i {
  font-size: 18px;
  margin-right: 10px;
  color: #95d13c;
  margin-top: 3px;
}

.advice-item p {
  margin: 0;
  line-height: 1.6;
  color: #606266;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-library {
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(151, 192, 15, 0.2);
  border: 1px solid #eaff8f;
}

.video-library h2 {
  margin-top: 0;
  margin-bottom: 30px;
  color: #95d13c;
  font-weight: 600;
  text-align: center;
}

.video-search {
  margin-bottom: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.video-card {
  cursor: pointer;
  transition: all 0.3s;
  border-color: #eaff8f;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(151, 192, 15, 0.2);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(151, 192, 15, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.video-card:hover .play-icon {
  opacity: 1;
}

.play-icon i {
  color: #fff;
  font-size: 24px;
}

.video-info {
  padding: 10px;
}

.video-info h4 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-duration {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

/* 调整Element UI的主题色 */
::v-deep .el-button--primary {
  background-color: #95d13c;
  border-color: #95d13c;
}

::v-deep .el-button--primary:hover,
::v-deep .el-button--primary:focus {
  background-color: #a3e350;
  border-color: #a3e350;
}

::v-deep .el-button--success {
  background-color: #8dc63f;
  border-color: #8dc63f;
}

::v-deep .el-button--success:hover,
::v-deep .el-button--success:focus {
  background-color: #9ad44f;
  border-color: #9ad44f;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #95d13c;
  border-color: #95d13c;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: #95d13c;
  border-color: #95d13c;
}

::v-deep .el-input__inner:focus,
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: #95d13c;
}

::v-deep .el-step__head.is-process {
  color: #95d13c;
  border-color: #95d13c;
}

::v-deep .el-step__head.is-finish {
  color: #95d13c;
  border-color: #95d13c;
}

::v-deep .el-step__title.is-process {
  color: #95d13c;
}

::v-deep .el-step__title.is-finish {
  color: #95d13c;
}

::v-deep .el-tabs__item.is-active {
  color: #95d13c;
}

::v-deep .el-tabs__active-bar {
  background-color: #95d13c;
}

/* 媒体查询适配移动设备 */
@media screen and (max-width: 768px) {
  .weekly-schedule {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .goal-cards {
    flex-direction: column;
    align-items: center;
  }
  
  .goal-card {
    width: 90%;
  }
}

/* 打印样式 */
@media print {
  .steps-nav,
  .action-buttons,
  .el-button,
  .video-library {
    display: none !important;
  }
  
  .fitness-container {
    padding: 0;
    background-color: white;
    background-image: none;
  }
  
  .main-content {
    box-shadow: none;
    border: none;
    background-color: white;
  }
  
  .step-content,
  .plan-result,
  .plan-overview, 
  .milestone-targets, 
  .weekly-plan, 
  .nutrition-advice, 
  .additional-advice {
    box-shadow: none;
    padding: 10px 0;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
  
  .weekly-schedule {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .day-card {
    page-break-inside: avoid;
    background-color: #f8f8f8 !important;
    border: 1px solid #ddd !important;
  }
  
  /* 彩色元素使用打印友好的颜色 */
  .plan-overview .el-card__header,
  .milestone-targets .el-card__header,
  .weekly-plan .el-card__header,
  .nutrition-advice .el-card__header,
  .additional-advice .el-card__header {
    background: #f0f0f0 !important;
    color: #333 !important;
  }
  
  /* 确保文本可读性 */
  .goal-summary h3,
  .macro-nutrients h3,
  .meal-suggestions h3,
  .workout-info h5,
  .day-card h4 {
    color: #333 !important;
  }
}

/* 步骤条样式增强 */
::v-deep .el-steps {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(151, 192, 15, 0.1);
}

/* 表单元素美化 */
::v-deep .el-form-item {
  margin-bottom: 18px;
}

::v-deep .el-input__inner,
::v-deep .el-select .el-input__inner,
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
  border-color: #d6f0a8;
  transition: all 0.3s;
}

::v-deep .el-input__inner:hover,
::v-deep .el-select .el-input__inner:hover {
  border-color: #95d13c;
}

/* 按钮增强效果 */
::v-deep .el-button {
  letter-spacing: 1px;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
}

::v-deep .el-button--primary,
::v-deep .el-button--success {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(149, 209, 60, 0.3);
}

::v-deep .el-button--primary:hover,
::v-deep .el-button--success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(149, 209, 60, 0.4);
}

.day-card h4 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
  color: #8dc63f;
  border-bottom: 1px solid #e6f7a4;
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.workout-info h5 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
  color: #7ab436;
  font-size: 14px;
  background: rgba(232, 245, 205, 0.5);
  padding: 6px;
  border-radius: 20px;
}

.exercise-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #e6f7a4;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.exercise-item:hover {
  background-color: rgba(232, 245, 205, 0.3);
  padding-left: 5px;
  border-radius: 4px;
}

.exercise-name {
  font-weight: 600;
  color: #546e7a;
}

.exercise-detail {
  color: #78909c;
  margin: 5px 0;
}

.rest-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #90a4ae;
}

.rest-day i {
  font-size: 36px;
  margin-bottom: 12px;
  color: #bcd66e;
}

/* 在较小屏幕上减小表单元素间距 */
@media screen and (max-height: 800px) {
  ::v-deep .el-form-item {
    margin-bottom: 14px;
  }
  
  .step-panel[v-show="activeStep === 1"],
  .step-panel[v-show="activeStep === 2"] {
    padding: 15px 0;
  }
  
  .step-panel h2 {
    margin-top: 0;
    margin-bottom: 15px;
  }
}

/* 特定步骤的表单容器样式 */
.step-panel[v-show="activeStep === 1"] .el-form,
.step-panel[v-show="activeStep === 2"] .el-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 优化步骤二的表单布局 */
.step-panel[v-show="activeStep === 1"] .el-checkbox-group,
.step-panel[v-show="activeStep === 2"] .el-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.step-panel[v-show="activeStep === 1"] .el-checkbox,
.step-panel[v-show="activeStep === 2"] .el-checkbox {
  margin-right: 0;
  margin-left: 0;
}

/* 调整debug-info区域 */
.debug-info {
  margin-bottom: 10px !important;
  padding: 8px !important;
}

/* 调整步骤标题的间距 */
.step-panel h2 {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 20px;
}

/* 调整表单内部元素的样式 */
.step-panel[v-show="activeStep === 1"] .el-form-item__label,
.step-panel[v-show="activeStep === 2"] .el-form-item__label {
  line-height: 30px;
  padding-bottom: 0;
}

.step-panel[v-show="activeStep === 1"] .el-form-item__content,
.step-panel[v-show="activeStep === 2"] .el-form-item__content {
  line-height: 30px;
}

/* 调整选择框的高度和行高 */
.step-panel[v-show="activeStep === 1"] .el-select .el-input__inner,
.step-panel[v-show="activeStep === 2"] .el-select .el-input__inner {
  height: 36px;
  line-height: 36px;
}

/* 调整日期选择框 */
.step-panel[v-show="activeStep === 2"] .el-date-editor {
  height: 36px;
  line-height: 36px;
}

.step-panel[v-show="activeStep === 2"] .el-date-editor .el-input__inner {
  height: 36px;
  line-height: 36px;
}

/* 确保内容不会超出容器 */
.fitness-container {
  overflow-x: hidden;
  min-height: 100vh;
  height: auto;
  max-height: none;
}

/* 确保页面不会出现水平滚动条 */
html, body {
  overflow-x: hidden;
}

/* 确保action-buttons离表单底部的距离合适 */
.step-panel[v-show="activeStep === 1"] .action-buttons,
.step-panel[v-show="activeStep === 2"] .action-buttons {
  margin-top: 16px;
}

/* 特定优化表单元素在步骤二和步骤三的显示 */
.step-panel[v-show="activeStep === 1"],
.step-panel[v-show="activeStep === 2"] {
  position: static;
  display: flex;
  flex-direction: column;
  height: auto;
}

/* 表单布局精确控制 */
.step-panel[v-show="activeStep === 1"] .el-form,
.step-panel[v-show="activeStep === 2"] .el-form {
  display: flex;
  flex-direction: column;
}

/* 表单元素紧凑布局 */
.step-panel[v-show="activeStep === 1"] .el-form-item,
.step-panel[v-show="activeStep === 2"] .el-form-item {
  margin-bottom: 8px;
}

/* 优化复选框组的布局 */
.step-panel[v-show="activeStep === 1"] .el-checkbox-group,
.step-panel[v-show="activeStep === 2"] .el-checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 确保表单元素不换行 */
.step-panel[v-show="activeStep === 1"] .el-checkbox,
.step-panel[v-show="activeStep === 2"] .el-checkbox {
  margin-right: 0;
  margin-left: 0;
  white-space: nowrap;
}

/* 优化输入框高度 */
.step-panel[v-show="activeStep === 1"] .el-input__inner,
.step-panel[v-show="activeStep === 2"] .el-input__inner,
.step-panel[v-show="activeStep === 1"] .el-input-number__decrease,
.step-panel[v-show="activeStep === 1"] .el-input-number__increase,
.step-panel[v-show="activeStep === 2"] .el-input-number__decrease,
.step-panel[v-show="activeStep === 2"] .el-input-number__increase,
.step-panel[v-show="activeStep === 2"] .el-date-editor,
.step-panel[v-show="activeStep === 2"] .el-date-editor .el-input__inner {
  height: 32px;
  line-height: 32px;
}

/* 优化标签和内容的行高 */
.step-panel[v-show="activeStep === 1"] h2,
.step-panel[v-show="activeStep === 2"] h2 {
  font-size: 18px;
  margin: 0 0 12px 0;
}

/* 使用flex布局代替滚动条控制 */

/* 全局表单样式优化 */
.el-form-item {
  margin-bottom: 10px;
}

.el-form-item__label {
  line-height: 28px;
  padding: 0;
}

.el-form-item__content {
  line-height: 28px;
}

/* 优化控件尺寸，提高布局效率 */
.el-input__inner,
.el-select .el-input__inner,
.el-input-number__decrease,
.el-input-number__increase,
.el-date-editor,
.el-date-editor .el-input__inner {
  height: 32px;
  line-height: 32px;
}

/* 确保内容自适应布局 */
.step-panel[v-show="activeStep === 1"] .el-form-item,
.step-panel[v-show="activeStep === 2"] .el-form-item {
  margin-bottom: 10px;
}

/* 修复标题和按钮间距 */
.step-panel h2 {
  margin-bottom: 10px !important;
  font-size: 18px !important;
}

/* 优化空间利用，合理规划布局避免滚动条 */

/* 优化表单统一样式 */
.el-form-item {
  margin-bottom: 12px;
}

.el-form-item__label {
  line-height: 30px;
  padding: 0;
}

.el-form-item__content {
  line-height: 30px;
}

/* 设置所有输入组件高度统一 */
.el-input__inner,
.el-select .el-input__inner,
.el-input-number__decrease,
.el-input-number__increase,
.el-date-editor,
.el-date-editor .el-input__inner {
  height: 36px;
  line-height: 36px;
}

/* 优化步骤二和步骤三的表单组 */
.step-panel[v-show="activeStep === 1"] .el-checkbox-group,
.step-panel[v-show="activeStep === 2"] .el-checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 移除之前所有复杂的滚动条控制代码 */

.step-panel h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

/* 缩小表单控件元素间距 */
.step-panel[v-show="activeStep === 1"] .el-form-item,
.step-panel[v-show="activeStep === 2"] .el-form-item {
  margin-bottom: 5px;
}

/* 使标签和表单元素在同一行 */
.step-panel[v-show="activeStep === 1"] .el-form-item__label,
.step-panel[v-show="activeStep === 2"] .el-form-item__label {
  float: left;
  text-align: right;
  padding-right: 12px;
  font-size: 13px;
}

/* 优化表单内容 */
.step-panel[v-show="activeStep === 1"] .el-form-item__content,
.step-panel[v-show="activeStep === 2"] .el-form-item__content {
  margin-left: 120px !important;
  line-height: 20px;
}

/* 调整按钮位置，使其不占用垂直空间 */
.step-panel[v-show="activeStep === 1"] .action-buttons,
.step-panel[v-show="activeStep === 2"] .action-buttons {
  margin-top: 10px;
}

/* 优化debug信息区域样式 */
.debug-info {
  margin-bottom: 5px !important;
  padding: 5px !important;
  font-size: 12px;
}

/* 禁用溢出滚动 */
.step-panel[v-show="activeStep === 1"],
.step-panel[v-show="activeStep === 2"] {
  overflow: hidden !important;
}

/* 全局禁用滚动条，同时保持内容可见 */
html, body {
  overflow-y: auto;
  overflow-x: hidden;
}

.fitness-container, 
.main-content,
.step-content,
.step-panel,
.el-form {
  overflow: visible;
}

/* 覆盖Element UI的滚动组件 */
.el-scrollbar__wrap {
  overflow: hidden;
}

.step-panel[v-show="activeStep === 0"] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.step-panel[v-show="activeStep === 0"] h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.step-panel[v-show="activeStep === 0"] .action-buttons {
  margin-top: 15px;
}

/* 专门优化设定目标界面的表单标签 */
.step-panel[v-show="activeStep === 1"] .el-form-item__label {
  width: 170px !important; /* 增加标签宽度，确保长标签显示完整 */
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important; /* 允许文本溢出显示 */
  text-overflow: clip !important;
  line-height: 32px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-weight: normal !important;
  color: #333 !important;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}

.step-panel[v-show="activeStep === 1"] .el-form-item__content {
  margin-left: 170px !important; /* 与标签宽度保持一致 */
  min-width: 180px !important;
  flex: 1;
  display: flex;
}

/* 调整特定长标签的表单项，缩小字体确保一行显示 */
.step-panel[v-show="activeStep === 1"] .el-form-item[label="计划周期内总减重(kg)"] .el-form-item__label,
.step-panel[v-show="activeStep === 1"] .el-form-item[label="每周目标减重(kg)"] .el-form-item__label,
.step-panel[v-show="activeStep === 1"] .el-form-item[label="每周目标增肌(kg)"] .el-form-item__label,
.step-panel[v-show="activeStep === 1"] .el-form-item[label="当前完成距离/时间"] .el-form-item__label {
  font-size: 14px !important; /* 统一字体大小 */
}

/* 专门优化表单布局的总体结构 */
.step-panel[v-show="activeStep === 1"] .el-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 650px; /* 略微增加表单宽度 */
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* 调整表单项的布局 */
.step-panel[v-show="activeStep === 1"] .el-form-item {
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 顶部对齐，尤其对复选框组有帮助 */
}

/* 额外优化复选框组的布局 */
.step-panel[v-show="activeStep === 1"] .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 5px;
}

.step-panel[v-show="activeStep === 1"] .el-checkbox {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
}

/* 确保数字输入框和选择器的样式统一 */
.step-panel[v-show="activeStep === 1"] .el-input-number,
.step-panel[v-show="activeStep === 1"] .el-select {
  width: 100% !important;
}

/* 对单选按钮组优化 */
.step-panel[v-show="activeStep === 1"] .el-radio-group {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-top: 5px;
}

/* 调整第三步表单的样式，和第二步保持一致 */
.step-panel[v-show="activeStep === 2"] .el-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

.step-panel[v-show="activeStep === 2"] .el-form-item {
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 顶部对齐 */
}

.step-panel[v-show="activeStep === 2"] .el-form-item__label {
  width: 170px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding-right: 12px !important;
  line-height: 32px !important;
  font-size: 14px !important;
  color: #333 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.step-panel[v-show="activeStep === 2"] .el-form-item__content {
  flex: 1;
  min-width: 180px !important;
  margin-left: 170px !important;
  display: flex;
}

/* 确保第三步的选择器和日期选择器样式统一 */
.step-panel[v-show="activeStep === 2"] .el-select,
.step-panel[v-show="activeStep === 2"] .el-date-editor {
  width: 100% !important;
}

/* 第三步表单中的复选框组布局 */
.step-panel[v-show="activeStep === 2"] .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 5px;
}

.step-panel[v-show="activeStep === 2"] .el-checkbox {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
}

.expert-advice {
  display: block;
}

.expert-advice i {
  float: left;
  font-size: 24px;
  margin-right: 15px;
  color: #95d13c;
}

.expert-advice div {
  margin-left: 40px;
  line-height: 1.8;
  color: #303133;
}

.expert-advice h1, 
.expert-advice h2, 
.expert-advice h3 {
  color: #95d13c;
  margin: 15px 0 10px 0;
}

.expert-advice ul {
  padding-left: 20px;
  margin: 10px 0;
}

.expert-advice li {
  margin-bottom: 5px;
}

.expert-advice hr {
  border: none;
  border-top: 1px dashed #d6f0a8;
  margin: 15px 0;
}

.expert-advice strong {
  color: #67C23A;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.bodybuilding-pro-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8ffed;
  border-radius: 4px;
  border-left: 3px solid #95d13c;
}

.bodybuilding-pro-info h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #95d13c;
}

.bodybuilding-pro-info ul {
  padding-left: 20px;
  margin: 0;
  list-style-type: disc;
}

.bodybuilding-pro-info li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.expert-advice-card {
  margin-top: 20px;
  margin-bottom: 30px;
  border: none;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(151, 192, 15, 0.15);
  overflow: hidden;
  transition: all 0.35s ease;
}

.expert-advice-card:hover {
  box-shadow: 0 12px 30px rgba(151, 192, 15, 0.25);
  transform: translateY(-8px);
}

.expert-advice-card ::v-deep .el-card__body {
  padding: 15px 20px;
}

.expert-advice-content {
  padding: 0;
}

.expert-advice {
  display: block;
  text-align: left;
}

.expert-advice i {
  float: left;
  font-size: 18px;
  margin-right: 15px;
  color: #95d13c;
}

.expert-advice div {
  margin-left: 40px;
  line-height: 1.5;
  color: #303133;
  text-align: left;
}

/* 统一标题样式 */
.expert-advice h1, 
.expert-advice h2, 
.expert-advice h3 {
  font-size: 16px;
  margin: 16px 0 10px 0;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.expert-advice p {
  font-size: 14px;
  margin: 6px 0;
  line-height: 1.5;
  text-align: left;
}

.expert-advice ul {
  padding-left: 20px;
  margin: 8px 0;
  list-style-type: disc;
  text-align: left;
}

.expert-advice li {
  font-size: 14px;
  margin: 6px 0;
  line-height: 1.5;
  text-align: left;
}

.expert-advice hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 15px 0;
}

.expert-advice strong {
  color: #67C23A;
  font-weight: bold;
}

.empty-plan-card {
  border: 1px dashed #95d13c;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(151, 192, 15, 0.15);
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.35s ease;
}

.empty-plan-card:hover {
  box-shadow: 0 12px 30px rgba(151, 192, 15, 0.25);
  transform: translateY(-8px);
}

.empty-plan-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  font-size: 36px;
  margin-bottom: 15px;
  color: #95d13c;
}

.empty-plan-content h3 {
  color: #95d13c;
  margin-bottom: 10px;
}

.empty-plan-content p {
  color: #606266;
  margin: 0;
}

.expert-advice-content {
  padding: 10px 0;
}

.expert-advice {
  display: block;
  text-align: left;
}

.expert-advice i {
  float: left;
  font-size: 18px;
  margin-right: 15px;
  color: #95d13c;
}

.expert-advice div {
  margin-left: 40px;
  line-height: 1.5;
  color: #303133;
  text-align: left;
}

.expert-advice h1 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #67C23A;
  text-align: left;
}

.expert-advice h2 {
  font-size: 16px;
  margin-top: 16px;
  margin-bottom: 10px;
  color: #8dc63f;
  text-align: left;
}

.expert-advice h3 {
  font-size: 15px;
  margin-top: 14px;
  margin-bottom: 8px;
  color: #95d13c;
  text-align: left;
}

.expert-advice p {
  font-size: 14px;
  margin: 6px 0;
  text-align: left;
}

.expert-advice ul {
  padding-left: 20px;
  margin: 8px 0;
  list-style-type: disc;
  text-align: left;
}

.expert-advice li {
  margin-bottom: 6px;
  line-height: 1.5;
  font-size: 14px;
  text-align: left;
}
</style>
